Compose dan library lainnya

Anda dapat menggunakan library favorit dalam Compose. Bagian ini menjelaskan cara menggabungkan beberapa library yang paling berguna.

ViewModel

Jika Anda menggunakan library ViewModel Komponen Arsitektur, Anda dapat mengakses ViewModel dari composable mana pun dengan memanggil fungsi viewModel().

class ExampleViewModel : ViewModel() { /*...*/ }

@Composable
fun MyExample(
    viewModel: ExampleViewModel = viewModel()
) {
    // use viewModel here
}

viewModel() menampilkan ViewModel yang sudah ada atau membuat yang baru dalam cakupan yang ditentukan. ViewModel dipertahankan selama cakupan masih aktif. Misalnya, jika komposisi digunakan dalam suatu aktivitas, viewModel() akan menampilkan instance yang sama sampai aktivitas itu selesai atau prosesnya diakhiri.

@Composable
fun MyExample(
    // Returns the same instance as long as the activity is alive,
    // just as if you grabbed the instance from an Activity or Fragment
    viewModel: ExampleViewModel = viewModel()
) { /* ... */ }

@Composable
fun MyExample2(
    viewModel: ExampleViewModel = viewModel() // Same instance as in MyExample
) { /* ... */ }

Jika ViewModel Anda memiliki dependensi, viewModel() akan menggunakan ViewModelProvider.Factory opsional sebagai parameter.

Untuk mengetahui informasi selengkapnya tentang ViewModel di Compose dan bagaimana instance digunakan dengan library Navigasi Compose, atau aktivitas dan fragmen, lihat dokumen Interoperabilitas.

Aliran data

Compose dilengkapi dengan ekstensi untuk solusi berbasis aliran data yang paling populer dari Android. Setiap ekstensi ini disediakan oleh artefak yang berbeda:

Artefak ini terdaftar sebagai pemroses dan mewakili nilai sebagai State. Setiap kali nilai baru dikeluarkan, Compose merekomposisi bagian-bagian UI tempat state.value digunakan. Misalnya, dalam kode ini, ShowData merekomposisi setiap kali exampleLiveData mengeluarkan nilai baru.

@Composable
fun MyExample(
    viewModel: ExampleViewModel = viewModel()
) {
    val dataExample = viewModel.exampleLiveData.observeAsState()

    // Because the state is read here,
    // MyExample recomposes whenever dataExample changes.
    dataExample.value?.let {
        ShowData(dataExample)
    }
}

Operasi asinkron di Compose

Jetpack Compose memungkinkan Anda menjalankan operasi asinkron menggunakan coroutine dari dalam composable.

Lihat LaunchedEffect, produceState, dan rememberCoroutineScope API di dokumentasi efek samping untuk mengetahui informasi selengkapnya.

Sebaiknya gunakan library navigasi Compose untuk menambahkan elemen navigasi ke project Compose Anda. Elemen ini memungkinkan Anda menambahkan UI untuk bernavigasi di antara composable sekaligus memanfaatkan infrastruktur dan fitur komponen Navigasi.

Pelajari lebih lanjut integrasi ini dalam dokumentasi Menavigasi dengan Compose.

Hilt

Hilt adalah solusi yang direkomendasikan untuk menerapkan injeksi dependensi di aplikasi Android, dan berfungsi lancar dengan Compose.

Fungsi viewModel() yang disebutkan di bagian ViewModel secara otomatis menggunakan ViewModel yang dibuat oleh Hilt dengan anotasi @HiltViewModel. Kami telah menyediakan dokumentasi dengan informasi tentang integrasi ViewModel Hilt.

@HiltViewModel
class ExampleViewModel @Inject constructor(
    private val savedStateHandle: SavedStateHandle,
    private val repository: ExampleRepository
) : ViewModel() { /* ... */ }

@Composable
fun ExampleScreen(
    exampleViewModel: ExampleViewModel = viewModel()
) { /* ... */ }

Hilt dan Navigasi

Hilt juga terintegrasi dengan library navigasi Compose. Tambahkan dependensi tambahan berikut ke file Gradle Anda:

app/build.gradle

...
dependencies {
  ...
  implementation 'androidx.hilt:hilt-navigation-compose:1.0.0-alpha03'
}

Jika @HiltViewModel yang dianotasi dengan ViewModel disertakan ke grafik navigasi, gunakan fungsi yang dapat dikomposisi hiltViewModel yang berfungsi dengan fragmen atau aktivitas yang dianotasi dengan @AndroidEntryPoint.

Misalnya, jika ExampleScreen adalah tujuan dalam grafik navigasi, panggil hiltViewModel() untuk mendapatkan instance ExampleViewModel yang disertakan ke tujuan sebagaimana ditunjukkan dalam cuplikan kode di bawah:

// import androidx.hilt.navigation.compose.hiltViewModel

@Composable
fun MyApp() {
    NavHost(navController, startDestination = startRoute) {
        composable("example") { backStackEntry ->
            // Creates a ViewModel from the current BackStackEntry
            // Available in the androidx.hilt:hilt-navigation-compose artifact
            val exampleViewModel = hiltViewModel<ExampleViewModel>()
            ExampleScreen(exampleViewModel)
        }
        /* ... */
    }
}

Jika Anda perlu mengambil instance ViewModel yang disertakan ke rute navigasi, teruskan root tujuan sebagai parameter:

// import androidx.hilt.navigation.compose.hiltViewModel
// import androidx.navigation.compose.getBackStackEntry

@Composable
fun MyApp() {
    NavHost(navController, startDestination = startRoute) {
        navigation(startDestination = innerStartRoute, route = "Parent") {
            // ...
            composable("exampleWithRoute") { backStackEntry ->
                val parentEntry = remember {
                  navController.getBackStackEntry("Parent")
                }
                val parentViewModel = hiltViewModel<ParentViewModel>(
                  parentEntry
                )
                ExampleWithRouteScreen(parentViewModel)
            }
        }
    }
}

Paging

Library Paging mempermudah Anda memuat data secara bertahap dan didukung di Compose. Halaman rilis Paging berisi informasi tentang dependensi paging-compose tambahan yang perlu ditambahkan pada project dan versinya.

Berikut adalah contoh Compose API dari library Paging:

@Composable
fun MyExample(flow: Flow<PagingData<String>>) {
    val lazyPagingItems = flow.collectAsLazyPagingItems()
    LazyColumn {
        items(lazyPagingItems) {
            Text("Item is $it")
        }
    }
}

Lihat dokumentasi Daftar untuk mengetahui informasi selengkapnya tentang penggunaan Paging di Compose.

Gambar sedang dimuat

Library Coil dari Instacart menawarkan fungsi yang dapat dikomposisi untuk memuat gambar dari sumber eksternal, seperti memuat gambar jarak jauh melalui jaringan.

Berikut adalah contoh rememberImagePainter dari artefak io.coil-kt:coil-compose:

@Composable
fun MyExample() {
    val painter = rememberImagePainter(
        data = "https://picsum.photos/300/300",
        builder = {
            crossfade(true)
        }
    )

    Box {
        Image(
            painter = painter,
            contentDescription = stringResource(R.string.image_content_desc),
        )

        when (painter.state) {
            is ImagePainter.State.Loading -> {
                // Display a circular progress indicator whilst loading
                CircularProgressIndicator(Modifier.align(Alignment.Center))
            }
            is ImagePainter.State.Error -> {
                // If you wish to display some content if the request fails
            }
        }
    }
}