為方便使用,許多內建的 Material 3 可組合項 (androidx.compose.material3) 會根據 Material 規格,在應用程式中放置可組合項的方式,自行處理插邊。
插邊處理可組合函式
以下是會自動處理插邊的Material 元件清單。
應用程式列
TopAppBar/CenterAlignedTopAppBar/MediumTopAppBar/LargeTopAppBar:將系統資訊列的「頂端」和「水平」側邊套用為邊框間距,因為這會用於視窗頂端。BottomAppBar:將系統資訊列的「底部」和「水平」側邊套用為邊框間距。
內容容器
ModalDrawerSheet/DismissibleDrawerSheet/PermanentDrawerSheet(互動視窗導覽匣中的內容): 將垂直和開頭插邊套用至內容。ModalBottomSheet:套用底部插邊。NavigationBar:套用底部和水平插邊。NavigationRail:套用垂直和起始插邊。
Scaffold
根據預設,Scaffold 會提供插邊做為參數 PaddingValues,供您使用。Scaffold 不會將插邊套用至內容,您必須自行處理。舉例來說,如要在 Scaffold 內使用 LazyColumn 消耗這些插邊,請按照下列步驟操作:
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 ) { // .. } }
以下影片顯示 Scaffold 內的 LazyColumn,並分別停用和啟用無邊框螢幕顯示:
一般來說,只要在 Scaffold 中使用 PaddingValues 參數,就能將 UI 內縮,避開系統 UI 和螢幕凹口。如果使用 Scaffold,請避免使用其他插邊處理方法,例如尺規、邊框間距修飾符或插邊大小修飾符,以免對 UI 套用過多邊框間距。
覆寫預設插邊
您可以變更傳遞至可組合項的 windowInsets 參數,藉此設定可組合項的行為。這個參數可以改為套用不同類型的視窗內嵌,也可以傳遞空白例項來停用:WindowInsets(0, 0, 0, 0)。
舉例來說,如要停用 LargeTopAppBar 的插邊處理,請將 windowInsets 參數設為空白例項:
LargeTopAppBar( windowInsets = WindowInsets(0, 0, 0, 0), title = { Text("Hi") } )