Scrittura e altre librerie

Puoi utilizzare le tue librerie preferite in Scrivi. Questa sezione descrive come incorporare alcune delle librerie più utili.

Attività

Per utilizzare Compose in un'attività, devi utilizzare ComponentActivity, una sottoclasse di Activity che fornisce LifecycleOwner e componenti appropriati a Compose. Fornisce inoltre API aggiuntive che sganciano il codice dalla sostituzione dei metodi nella classe dell'attività. Activity Compose espone queste API ai composabili in modo che non sia più necessario eseguire l'override dei metodi al di fuori dei composabili o recuperare un'istanza Activity esplicita. Inoltre, queste API assicurano di essere inizializzate una sola volta, di sopravvivere alla ricompozione e di essere ripulite correttamente se il composable viene rimosso dalla composizione.

Risultato attività

L'API rememberLauncherForActivityResult() ti consente di ottenere un risultato da un'attività nel tuo composable:

@Composable
fun GetContentExample() {
    var imageUri by remember { mutableStateOf<Uri?>(null) }
    val launcher = rememberLauncherForActivityResult(ActivityResultContracts.GetContent()) { uri: Uri? ->
        imageUri = uri
    }
    Column {
        Button(onClick = { launcher.launch("image/*") }) {
            Text(text = "Load Image")
        }
        Image(
            painter = rememberAsyncImagePainter(imageUri),
            contentDescription = "My Image"
        )
    }
}
ComposeWithOtherLibraries.kt

Questo esempio mostra un contratto GetContent() semplice. La richiesta viene avviata toccando il pulsante. La lambda finale per rememberLauncherForActivityResult() viene invocata quando l'utente seleziona un'immagine e torna all'attività di lancio. Viene caricata l'immagine selezionata utilizzando la funzione rememberImagePainter() di Coil.

Qualsiasi sottoclasse di ActivityResultContract può essere utilizzata come primo argomento di rememberLauncherForActivityResult(). Ciò significa che puoi utilizzare questa tecnica per richiedere contenuti dal framework e in altri pattern comuni. Puoi anche creare i tuoi contratti personalizzati e utilizzarli con questa tecnica.

Attenzione: questo esempio mostra come avviare una richiesta da un'interazione utente. In questo caso da un listener onClick(). Se tenti di avviare una richiesta dall'interno del composable, verrà visualizzato un errore di runtime perché ActivityResultLauncher non è stato inizializzato a questo punto. Se devi attivare il lancio dopo la composizione, devi chiamare il metodo launch() dall'interno di un blocco LaunchedEffect o DisposableEffect.

Richiesta di autorizzazioni di runtime

La stessa API Activity Result e rememberLauncherForActivityResult() spiegate sopra possono essere utilizzate per richiedere le autorizzazioni di runtime utilizzando il contratto RequestPermission per una singola autorizzazione o RequestMultiplePermissions per più autorizzazioni.

La libreria Autorizzazioni accompagnate può essere utilizzata anche un livello superiore a queste API per mappare lo stato attuale concesso per le autorizzazioni allo stato utilizzabile dall'interfaccia utente di Compose.

Gestione del pulsante Indietro del sistema

Per fornire la navigazione a ritroso personalizzata e sostituire il comportamento predefinito del pulsante Indietro di sistema dall'interno del composable, il composable può utilizzare un BackHandler per intercettare l'evento:

var backHandlingEnabled by remember { mutableStateOf(true) }
BackHandler(backHandlingEnabled) {
    // Handle back press
}
ComposeWithOtherLibraries.kt

Il primo argomento controlla se il gestore BackHandler è attualmente attivo. Puoi utilizzare questo argomento per disattivare temporaneamente il gestore in base allo stato del componente. Il lambda finale verrà richiamato se l'utente attiva un evento back di sistema e BackHandler è attualmente abilitato.

Attenzione: anche se è possibile aggiungere più gestori di tasti Indietro a qualsiasi composizione, l'evento Indietro di sistema viene gestito e utilizzato dal BackHandler abilitato più interno. In altre parole, è attivo al massimo un BackHandler alla volta.

ViewModel

Se utilizzi la libreria ViewModel dei componenti di architettura, puoi accedere a ViewModel da qualsiasi componibile chiamando la funzione viewModel(). Aggiungi la seguente dipendenza al file Gradle:

Groovy

dependencies {
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
}

Kotlin

dependencies {
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
}

Puoi quindi utilizzare la funzione viewModel() nel codice.

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

// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    viewModel: MyViewModel = viewModel()
) {
    // use viewModel here
}
ComposeWithOtherLibraries.kt

viewModel() restituisce un ViewModel esistente o ne crea uno nuovo. Per impostazione predefinita, ViewModel restituito è limitato all'attività, al frammento o alla destinazione di navigazione che lo contiene e viene mantenuto attivo finché l'ambito è attivo.

Ad esempio, se il composable viene utilizzato in un'attività, viewModel() restituisce la stessa istanza finché l'attività non è terminata o il processo non viene interrotto.

class MyViewModel : ViewModel() { /*...*/ }
// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    // Returns the same instance as long as the activity is alive,
    // just as if you grabbed the instance from an Activity or Fragment
    viewModel: MyViewModel = viewModel()
) { /* ... */ }

@Composable
fun MyScreen2(
    viewModel: MyViewModel = viewModel() // Same instance as in MyScreen
) { /* ... */ }
ComposeWithOtherLibraries.kt

Linee guida per l'utilizzo

In genere accedi alle istanze ViewModel a componibili a livello di schermo, ovvero vicino a un componibile principale chiamato da un'attività, un frammento o la destinazione di un grafico di navigazione. Questo perché ViewModels sono, per impostazione predefinita, limitati a questi oggetti a livello di schermata. Scopri di più sul ciclo di vita e sull'ambito di un ViewModel qui.

Cerca di evitare di trasmettere le istanze ViewModel ad altri composabili, in quanto ciò potrebbe rendere più difficile il test di questi composabili e potrebbe interrompere le anteprime. Passa invece solo i dati e le funzioni di cui hanno bisogno come parametri.

Puoi utilizzare le istanze ViewModel per gestire lo stato dei composabili a livello di sottoschermata, ma tieni presente il ciclo di vita e l'ambito di ViewModel. Se il componibile è autonomo, potresti valutare l'uso di Hilt per inserire ViewModel ed evitare di dover passare le dipendenze dai componibili padre.

Se ViewModel ha dipendenze, viewModel() accetta un parametro facoltativo ViewModelProvider.Factory.

Per saperne di più su ViewModel in Compose e su come vengono utilizzate le istanze con la libreria Navigation Compose o con attività e frammenti, consulta la documentazione sull'interoperabilità.

Stream di dati

Compose include estensioni per le soluzioni Android basate su stream più popolari. Ognuna di queste estensioni è fornita da un elemento diverso:

• LiveData.observeAsState() incluso nell'elemento androidx.compose.runtime:runtime-livedata:$composeVersion.
• Flow.collectAsState() non richiede dipendenze aggiuntive.
• Observable.subscribeAsState() incluso nell'elemento androidx.compose.runtime:runtime-rxjava2:$composeVersion o androidx.compose.runtime:runtime-rxjava3:$composeVersion.

Questi elementi vengono registrati come ascoltatori e rappresentano i valori come State. Ogni volta che viene emesso un nuovo valore, Compose ricomponeva le parti dell'interfaccia utente in cui viene utilizzato state.value. Ad esempio, in questo codice, ShowData si ricompone ogni volta che exampleLiveData emette un nuovo valore.

// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    viewModel: MyViewModel = viewModel()
) {
    val dataExample = viewModel.exampleLiveData.observeAsState()

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

Operazioni asincrone in Compose

Jetpack Compose ti consente di eseguire operazioni asincrone utilizzando le coroutine all'interno dei tuoi composabili.

Per saperne di più, consulta le API LaunchedEffect, produceState e rememberCoroutineScope nella documentazione degli effetti collaterali.

Navigazione

Il componente Navigazione fornisce supporto per le applicazioni Jetpack Compose. Per ulteriori informazioni, consulta Navigare con Compose e Eseguire la migrazione di Jetpack Navigation a Navigation Compose.

Hilt

Hilt è la soluzione consigliata per l'inserimento delle dipendenze nelle app per Android e funziona perfettamente con Compose.

La funzione viewModel() menzionata nella sezione ViewModel utilizza automaticamente il ViewModel creato da Hilt con l'annotazione @HiltViewModel. Abbiamo fornito la documentazione con informazioni sull'integrazione di ViewModel di Hilt.

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

// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    viewModel: MyViewModel = viewModel()
) { /* ... */ }
ComposeWithOtherLibraries.kt

Hilt e navigazione

Hilt si integra anche con la libreria Navigation Compose. Aggiungi le seguenti dipendenze aggiuntive al tuo file Gradle:

Groovy

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

Kotlin

dependencies {
    implementation("androidx.hilt:hilt-navigation-compose:1.2.0")
}

Quando utilizzi Navigation Compose, usa sempre la funzione composable hiltViewModel per ottenere un'istanza del tuo @HiltViewModel annotato ViewModel. Questa operazione è valida per i frammenti o le attività annotati con @AndroidEntryPoint.

Ad esempio, se ExampleScreen è una destinazione in un grafico di navigazione, chiama hiltViewModel() per ottenere un'istanza di ExampleViewModel con l'ambito della destinazione, come mostrato nello snippet di codice di seguito:

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

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

Se invece devi recuperare l'istanza di un ViewModel limitata ai percorsi di navigazione o al grafo di navigazione, utilizza la funzione componibile hiltViewModel e passa il corrispondente backStackEntry come parametro:

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

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

Cercapersone

La libreria di creazione dei pacchetti semplifica il caricamento graduale dei dati ed è supportata in Compose. La pagina di release della paginazione contiene informazioni sulla dipendenza paging-compose aggiuntiva che deve essere aggiunta al progetto e alla relativa versione.

Ecco un esempio delle API Compose della libreria di paging:

@Composable
fun MyScreen(flow: Flow<PagingData<String>>) {
    val lazyPagingItems = flow.collectAsLazyPagingItems()
    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it }
        ) { index ->
            val item = lazyPagingItems[index]
            Text("Item is $item")
        }
    }
}
ComposeWithOtherLibraries.kt

Consulta la documentazione su elenchi e griglie per saperne di più sull'utilizzo della paginazione in Compose.

Maps

Puoi utilizzare la libreria Maps Compose per fornire Google Maps nella tua app. Ecco un esempio di utilizzo:

@Composable
fun MapsExample() {
    val singapore = LatLng(1.35, 103.87)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(singapore, 10f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    ) {
        Marker(
            state = remember { MarkerState(position = singapore) },
            title = "Singapore",
            snippet = "Marker in Singapore"
        )
    }
}
ComposeWithOtherLibraries.kt