Scaffold
Material Design 中的鷹架是一種基礎結構 適用於複雜使用者介面的標準化平台結合了 UI 的某些部分 (例如應用程式列和懸浮動作按鈕) 可為應用程式提供 外觀和風格一致。
範例
Scaffold
可組合項提供簡單明瞭的 API,可用於
根據質感設計指南快速組合應用程式的結構。
Scaffold
可接受多個可組合函式做為參數。這些
包括:
topBar
:螢幕頂端的應用程式列。bottomBar
:螢幕底部的應用程式列。floatingActionButton
:懸停於 可用來顯示按鍵動作的畫面
如需更詳盡的範例,瞭解如何同時實作頂端和底部 應用程式列,請參閱應用程式列頁面。
您也可以將 Scaffold
內容傳遞至其他容器,就像傳遞其他容器一樣。通過
提供給 content
lambda 的 innerPadding
值,供您稍後在子項中使用
可組合函式
以下範例詳細說明瞭
Scaffold
。包含頂端應用程式列、底部應用程式列和懸浮動作
與 Scaffold
內部狀態互動的按鈕。
@Composable fun ScaffoldExample() { var presses by remember { mutableIntStateOf(0) } Scaffold( topBar = { TopAppBar( colors = topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text("Top app bar") } ) }, bottomBar = { BottomAppBar( containerColor = MaterialTheme.colorScheme.primaryContainer, contentColor = MaterialTheme.colorScheme.primary, ) { Text( modifier = Modifier .fillMaxWidth(), textAlign = TextAlign.Center, text = "Bottom app bar", ) } }, floatingActionButton = { FloatingActionButton(onClick = { presses++ }) { Icon(Icons.Default.Add, contentDescription = "Add") } } ) { innerPadding -> Column( modifier = Modifier .padding(innerPadding), verticalArrangement = Arrangement.spacedBy(16.dp), ) { Text( modifier = Modifier.padding(8.dp), text = """ This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button. It also contains some basic inner content, such as this text. You have pressed the floating action button $presses times. """.trimIndent(), ) } } }
實作內容如下所示:
![Scaffold 的實作包含簡易的頂端和底部應用程式列,以及可疊代計數器的懸浮動作按鈕。Scaffold 的內部內容是說明元件的簡單文字。](https://developer.android.google.cn/static/develop/ui/compose/images/components/scaffold.png?authuser=3&hl=zh-tw)