Di chuyển Jetpack Navigation sang Navigation Compose

Navigation Compose API cho phép bạn di chuyển giữa các thành phần kết hợp trong một ứng dụng Compose, trong khi vẫn tận dụng được thành phần, cơ sở hạ tầng và các tính năng của Jetpack Navigation.

Trang này mô tả cách di chuyển từ Jetpack Navigation dựa trên Fragment sang Navigation Compose, trong quá trình di chuyển giao diện người dùng 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ể di chuyển sang thành phần Điều hướng trong 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. Các thành phần kết hợp màn hình có thể chứa nội dung kết hợp giữ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 để bật quy trình di chuyển Điều hướng trong 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 tương tác. Hãy xem tài liệu về khả năng tương tác điều hướng để biết thêm thông tin.

Không bắt buộc phải sử dụng Navigation Compose trong ứng dụng chỉ có Compose. 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 các Mảnh để lưu trữ nội dung có thể 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 áp dụng một phương pháp khác, bạn sẽ đạt đến một đ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 thành phần kết hợp. Ở giai đoạn này, bạn có thể di chuyển sang Navigation Compose.

Nếu ứng dụng của bạn đã 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 bạn tái cấu trúc 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:

  1. Thêm phần phụ thuộc Navigation Compose vào ứng dụng của bạn.

  2. 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

  3. Tạo các loại cho từng đích đến điều hướng. Sử dụng data object cho những đích đến không yêu cầu dữ liệu và data class hoặc class cho những đí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

  4. 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 đều có quyền truy cập vào thành phần kết hợp đó (thường là 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 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 và duy trì ngăn xếp lui:

    @Composable
fun SampleApp() {
    val navController = rememberNavController()
    // ...
}
    MigrationCommonScenariosSnippets.kt

  5. Tạo NavHost của ứng dụng 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

  6. Thêm đích đến composable để tạo biểu đồ điều hướng. Nếu mỗi màn hình đã được di chuyển sang Compose trước đó, 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ừ các 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

  7. 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à các sự kiện điều hướng đến 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 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

  8. Thay thế tất cả các lệnh gọi điều hướng findNavController() bằng các 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ó khả năng 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 khi hiển thị các sự kiện từ hàm có khả năng kết hợp cho các đối tượng 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 thông tin này trực tiếp từ mục nhập ngăn xếp lui tại đích đến hoặc từ ViewModel bằng cách sử dụ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

  9. Xoá tất cả các Fragment, bố cục XML có liên quan, đ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 Fragment và Jetpack Navigation không còn dùng nữa.

Bạn có thể tìm thấy các bước tương tự cùng với thông tin chi tiết hơn về Navigation Compose trong tài liệu Thiết lập.

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

Bất kể bạn đang 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 được áp dụng.

Dưới đâ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ề những 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 truyề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 tối thiểu cần thiết, chẳng hạn như giá trị nhận dạng duy nhất hoặc hình thức mã nhận dạng khác, làm đối số khi thực hiện các 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 các Mảnh của bạn đang truyền các đối tượng phức tạp dưới dạng đối số, hãy cân nhắc việc tái cấu trúc mã trước tiên 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 các 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 đối với Navigation Compose.

Di chuyể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 các Mảnh làm đích đến trong mã của mình. Để bắt đầu sử dụng Navigation Compose, tất cả đích đến của bạn cần phải là các 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 vấn đề.

Ảnh động chuyển tiếp

Kể từ Navigation 2.7.0-alpha01, hoạt động hỗ trợ thiết lập các 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 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 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 tế.
  • 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ó Navigation Compose.
  • Di chuyển Sunflower sang Jetpack Compose: Bài đăng trên blog ghi lại hành trình di chuyển ứng dụng mẫu Sunflower từ Khung hiển thị sang Compose, trong đó cũng bao gồm cả quá trình di chuyển sang Navigation Compose.
  • Jetnews cho mọi màn hình: Một 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.