Utilizzare gli inserti di Material 3

Per facilità d'uso, molti degli elementi composable Material 3 integrati (androidx.compose.material3) gestiscono autonomamente gli inset, in base al modo in cui gli elementi composable vengono posizionati nell'app in conformità con le specifiche di Material.

Elementi composable per la gestione degli inset

Di seguito è riportato un elenco dei componenti Material che gestiscono automaticamente gli inset.

Barre delle app

• TopAppBar / SmallTopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: applica i lati superiore e orizzontale delle barre di sistema come spaziatura interna, poiché viene utilizzato nella parte superiore della finestra.
• BottomAppBar: applica come spaziatura interna i lati inferiore e orizzontale delle barre di sistema.

Contenitori di contenuti

• ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (contenuti all'interno di un riquadro di navigazione a scomparsa modale): applica gli inset verticali e iniziali ai contenuti.
• ModalBottomSheet: applica gli inset inferiori.
• NavigationBar: applica gli inset inferiori e orizzontali.
• NavigationRail: applica gli inset verticale e iniziale.

Scaffold

Per impostazione predefinita, Scaffold fornisce gli inset come parametro PaddingValues da utilizzare. Scaffold non applica gli inset ai contenuti; questa responsabilità è tua. Ad esempio, per utilizzare questi inset con un LazyColumn all'interno di un Scaffold:

Scaffold { innerPadding ->
    // innerPadding contains inset information for you to use and apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        // ..
    }
}
InsetsSnippets.kt

Il seguente video mostra un LazyColumn all'interno di un Scaffold con la visualizzazione da bordo a bordo disattivata e attivata:

L'utilizzo del parametro PaddingValues in Scaffold è in genere sufficiente per inserire la UI lontano dalla UI di sistema e dai ritagli display. Evita di utilizzare altri approcci di gestione degli inset come righelli, modificatori di spaziatura interna o modificatori di dimensioni degli inset se utilizzi Scaffold per evitare di applicare una spaziatura interna eccessiva alla UI.

Sostituisci gli inset predefiniti

Puoi modificare il parametro windowInsets passato all'elemento composable per configurarne il comportamento. Questo parametro può essere un tipo diverso di inset della finestra da applicare, oppure può essere disattivato passando un'istanza vuota: WindowInsets(0, 0, 0, 0).

Ad esempio, per disattivare la gestione degli inset su LargeTopAppBar, imposta il parametro windowInsets su un'istanza vuota:

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)
InsetsSnippets.kt