Utilizzare gli inserti di Material 3

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

Nota: i componenti Material 2 (androidx.compose.material) non gestiscono automaticamente gli inserti. Tuttavia, puoi accedere agli inserti e applicarli manualmente. In androidx.compose.material 1.6.0 e versioni successive, utilizza il parametro windowInsets per applicare manualmente gli inserti per BottomAppBar, TopAppBar, BottomNavigation, e NavigationRail. Analogamente, utilizza il parametro contentWindowInsets per Scaffold. In caso contrario, applica i rientri manualmente come spaziatura interna.

Composable per la gestione degli inset

Di seguito è riportato un elenco dei componenti materiali che gestiscono automaticamente gli inserti.

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 (contenuto all'interno di un riquadro di navigazione modale): applica i margini interni verticali e iniziali ai contenuti.
• ModalBottomSheet: Applica gli inset inferiori.
• NavigationBar : applica gli inset bottom e horizontal.
• NavigationRail: applica gli inset vertical e start.

Scaffold

Per impostazione predefinita, Scaffold fornisce gli inserti come parametro PaddingValues da utilizzare. Scaffold non applica gli inserti ai contenuti; questa responsabilità è tua. Ad esempio, per utilizzare questi inserti 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 l'interfaccia utente lontano dall'interfaccia utente di sistema e dai ritagli del display. Evita di utilizzare altri approcci di gestione degli insetti come righelli, modificatori di spaziatura interna o modificatori di dimensioni degli insetti se utilizzi Scaffold per evitare di applicare una spaziatura interna eccessiva all'interfaccia utente.

Sostituisci i margini interni predefiniti

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

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

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