Trang này được dịch bởi Cloud Translation API.

Di chuyển Jetpack Navigation sang Navigation Compose

API Điều hướng Compose cho phép bạn điều hướng giữa các thành phần kết hợp trong ứng dụng Compose, đồng thời tận dụng thành phần, cơ sở hạ tầng và các tính năng của Điều hướng Jetpack.

Trang này mô tả cách di chuyển từ thành phần Điều hướng Jetpack dựa trên mảnh sang Điều hướng trong Compose, trong quá trình di chuyển giao diện người dùng lớn hơn dựa trên Khung hiển thị sang Jetpack Compose.

Điều kiện tiên quyết để di chuyển

Bạn có thể chuyển sang Navigation Compose (Thành phần điều hướng Compose) sau khi có thể thay thế tất cả các Mảnh bằng các thành phần kết hợp màn hình tương ứng. Thành phần kết hợp màn hình có thể chứa nội dung kết hợp của Compose và Chế độ xem, nhưng tất cả đích đến điều hướng phải là thành phần kết hợp để cho phép di chuyển Điều hướng Compose. Cho đến lúc đó, bạn nên tiếp tục sử dụng Thành phần điều hướng dựa trên mảnh trong cơ sở mã Khung hiển thị và Compose có khả năng tương tác. Hãy xem tài liệu về khả năng tương tác của tính năng điều hướng để biết thêm thông tin.

Việc sử dụng Navigation Compose trong ứng dụng chỉ dành cho Compose không phải là điều kiện tiên quyết. Bạn có thể tiếp tục sử dụng Thành phần điều hướng dựa trên mảnh, miễn là bạn giữ lại Mảnh để lưu trữ nội dung thành phần kết hợp.

Các bước di chuyển

Cho dù bạn đang làm theo chiến lược di chuyển được đề xuất của chúng tôi hay sử dụng một phương pháp khác, bạn sẽ đạt đến điểm mà tất cả đích đến điều hướng đều là thành phần kết hợp màn hình, trong đó các Mảnh chỉ đóng vai trò là vùng chứa có khả năng kết hợp. Ở bước này, bạn có thể di chuyển sang Navigation Compose.

Nếu ứng dụng của bạn đang tuân theo mẫu thiết kế UDF và hướng dẫn về cấu trúc của chúng tôi, thì việc di chuyển sang Jetpack Compose và Navigation Compose sẽ không yêu cầu tái cấu trúc lớn các lớp khác của ứng dụng, ngoài lớp giao diện người dùng.

Để di chuyển sang Navigation Compose, hãy làm theo các bước sau:

Thêm phần phụ thuộc Navigation Compose vào ứng dụng.

Tạo một thành phần kết hợp App-level và thêm thành phần này vào Activity làm điểm truy cập Compose, thay thế chế độ thiết lập bố cục Thành phần hiển thị:

class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
        setContent {
            SampleApp(/* ... */)
        }
    }
}MigrationCommonScenariosSnippets.kt

Tạo các loại cho từng đích đến điều hướng. Sử dụng data object cho các đích đến không yêu cầu dữ liệu và data class hoặc class cho các đích đến yêu cầu dữ liệu.
```
@Serializable data object First
@Serializable data class Second(val id: String)
@Serializable data object Third
MigrationCommonScenariosSnippets.kt
```
Thiết lập NavController ở một nơi mà tất cả thành phần kết hợp cần tham chiếu đến lớp này đều có quyền truy cập vào lớp này (thường nằm bên trong thành phần kết hợp App). Phương pháp này tuân theo các nguyên tắc về việc chuyển trạng thái lên trên và cho phép bạn sử dụng NavController làm nguồn đáng tin cậy để di chuyển giữa các màn hình có thể kết hợp cũng như để duy trì ngăn xếp lui:
```
@Composable
fun SampleApp() {
    val navController = rememberNavController()
    // ...
}MigrationCommonScenariosSnippets.kt
```

Tạo NavHost của ứng dụng bên trong thành phần kết hợp App và truyền navController:

@Composable
fun SampleApp() {
    val navController = rememberNavController()

    SampleNavHost(navController = navController)
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        // ...
    }
}MigrationCommonScenariosSnippets.kt

Thêm các đích đến composable để tạo biểu đồ điều hướng. Nếu trước đây mỗi màn hình đã được di chuyển sang Compose, thì bước này chỉ bao gồm việc trích xuất các thành phần kết hợp màn hình này từ Mảnh vào đích đến composable:

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                // FirstScreen(...) EXTRACT FROM HERE
            }
        }
    }
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(/* ... */) // EXTRACT TO HERE
        }
        composable<Second> {
            SecondScreen(/* ... */)
        }
        // ...
    }
}MigrationCommonScenariosSnippets.kt

Nếu bạn đã làm theo hướng dẫn về cách thiết kế giao diện người dùng Compose, cụ thể là cách truyền ViewModel và sự kiện điều hướng đến các thành phần kết hợp, thì bước tiếp theo là thay đổi cách bạn cung cấp ViewModel cho từng thành phần kết hợp trên màn hình. Bạn thường có thể sử dụng tính năng chèn Hilt và điểm tích hợp của tính năng này với Compose và Navigation thông qua hiltViewModel:
```
@Composable
fun FirstScreen(
    // viewModel: FirstViewModel = viewModel(),
    viewModel: FirstViewModel = hiltViewModel(),
    onButtonClick: () -> Unit = {},
) {
    // ...
}MigrationCommonScenariosSnippets.kt
```

Thay thế tất cả lệnh gọi điều hướng findNavController() bằng lệnh gọi navController và truyền các lệnh gọi này dưới dạng sự kiện điều hướng đến từng màn hình có thể kết hợp, thay vì truyền toàn bộ navController. Phương pháp này tuân theo các phương pháp hay nhất để hiển thị các sự kiện từ hàm có khả năng kết hợp cho phương thức gọi và giữ navController làm nguồn đáng tin cậy duy nhất.

Bạn có thể truyền dữ liệu đến một đích đến bằng cách tạo một thực thể của lớp tuyến đường được xác định cho đích đến đó. Sau đó, bạn có thể lấy trực tiếp từ mục ngăn xếp lui tại đích đến hoặc từ ViewModel bằng SavedStateHandle.toRoute().

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(
                onButtonClick = {
                    // findNavController().navigate(firstScreenToSecondScreenAction)
                    navController.navigate(Second(id = "ABC"))
                }
            )
        }
        composable<Second> { backStackEntry ->
            val secondRoute = backStackEntry.toRoute<Second>()
            SecondScreen(
                id = secondRoute.id,
                onIconClick = {
                    // findNavController().navigate(secondScreenToThirdScreenAction)
                    navController.navigate(Third)
                }
            )
        }
        // ...
    }
}MigrationCommonScenariosSnippets.kt

Xoá tất cả Mảnh, bố cục XML có liên quan, thành phần điều hướng không cần thiết và các tài nguyên khác, cũng như các phần phụ thuộc cũ của Mảnh và Điều hướng Jetpack.

Bạn có thể xem các bước tương tự với những thông tin chi tiết khác liên quan đến thành phần Điều hướng trong Compose trong tài liệu về Thiết lập.

Các trường hợp sử dụng phổ biến

Bất kể bạn đang sử dụng thành phần Điều hướng nào, các nguyên tắc điều hướng tương tự vẫn áp dụng.

Sau đây là một số trường hợp sử dụng phổ biến khi di chuyển:

Để biết thêm thông tin chi tiết về các trường hợp sử dụng này, hãy xem bài viết Điều hướng bằng Compose.

Truy xuất dữ liệu phức tạp khi điều hướng

Bạn không nên chuyển các đối tượng dữ liệu phức tạp khi điều hướng. Thay vào đó, hãy truyền thông tin cần thiết tối thiểu, chẳng hạn như giá trị nhận dạng duy nhất hoặc một dạng mã nhận dạng khác làm đối số khi thực hiện thao tác điều hướng. Bạn nên lưu trữ các đối tượng phức tạp dưới dạng dữ liệu trong một nguồn đáng tin cậy, chẳng hạn như lớp dữ liệu. Để biết thêm thông tin, hãy xem phần Truy xuất dữ liệu phức tạp khi điều hướng.

Nếu Mảnh đang truyền các đối tượng phức tạp dưới dạng đối số, trước tiên, hãy cân nhắc việc tái cấu trúc mã theo cách cho phép lưu trữ và tìm nạp các đối tượng này từ lớp dữ liệu. Hãy xem kho lưu trữ Now in Android để biết ví dụ.

Các điểm hạn chế

Phần này mô tả các giới hạn hiện tại của Navigation Compose.

Di chuyển dần dần sang Navigation Compose

Hiện tại, bạn không thể sử dụng Navigation Compose trong khi vẫn sử dụng Mảnh làm đích đến trong mã. Để bắt đầu sử dụng Navigation Compose, tất cả đích đến của bạn đều cần phải là thành phần kết hợp. Bạn có thể theo dõi yêu cầu về tính năng này trên Công cụ theo dõi lỗi.

Ảnh động chuyển tiếp

Kể từ Navigation 2.7.0-alpha01, tính năng hỗ trợ thiết lập hiệu ứng chuyển đổi tuỳ chỉnh (trước đây là từ AnimatedNavHost) hiện được hỗ trợ trực tiếp trong NavHost. Hãy đọc kỹ ghi chú phát hành để biết thêm thông tin.

Tìm hiểu thêm

Để biết thêm thông tin về cách di chuyển sang Navigation Compose, hãy xem các tài nguyên sau:

Lớp học lập trình về Navigation Compose: Tìm hiểu kiến thức cơ bản về Navigation Compose thông qua một lớp học lập trình thực hành.
Kho lưu trữ Now in Android: Một ứng dụng Android có đầy đủ chức năng được xây dựng hoàn toàn bằng Kotlin và Jetpack Compose, tuân theo các phương pháp hay nhất về thiết kế và phát triển Android, đồng thời có cả thành phần Điều hướng trong Compose.
Di chuyển Sunflower sang Jetpack Compose: Bài đăng trên blog ghi lại hành trình di chuyển của ứng dụng mẫu Sunflower từ Khung hiển thị sang Compose, cũng bao gồm cả việc di chuyển sang Navigation Compose.
Jetnews cho mọi màn hình: Bài đăng trên blog ghi lại quá trình tái cấu trúc và di chuyển mẫu Jetnews để hỗ trợ tất cả màn hình bằng Jetpack Compose và Navigation Compose.

Đề xuất cho bạn

Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
Điều hướng bằng Compose
Compose và các thư viện khác
Những điểm khác cần cân nhắc