Scaffold 腳手架

Scaffold 腳手架組件是一個核心組件，它為開發者提供了一個標準的、可定制的應用界面框架。androidx.compose.material3.Scaffold 包含了應用界面的基礎元素，如狀態欄、導航欄、頂部應用欄（TopAppBar）等。通過 Scaffold，開發者可以輕松地為應用添加這些常見組件，并對其進行自定義。

Scaffold 特點

• 內置組件：Scaffold 內置了狀態欄、導航欄等常見組件，開發者只需簡單地配置參數就可以使用。
• 易于定制：Scaffold 雖然提供了默認的配置，但開發者可以輕松地自定義這些組件的外觀和行為。
• 高度靈活：Scaffold 的設計允許開發者在需要時添加或刪除組件，使其能夠高度適應不同的應用需求。

Scaffold 聲明及參數

@Composable
fun Scaffold(modifier: Modifier = Modifier,topBar: @Composable () -> Unit = {},bottomBar: @Composable () -> Unit = {},snackbarHost: @Composable () -> Unit = {},floatingActionButton: @Composable () -> Unit = {},floatingActionButtonPosition: FabPosition = FabPosition.End,containerColor: Color = MaterialTheme.colorScheme.background,contentColor: Color = contentColorFor(containerColor),contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,content: @Composable (PaddingValues) -> Unit
): Unit

參數名	描述
modifier	用于修改 Scaffold 的布局屬性，比如大小、位置等。默認是 Modifier，表示沒有任何額外修飾。
topBar	用于定義應用的頂部欄，通常是一個 TopAppBar。
bottomBar	用于定義應用的底部導航欄，可以是一個 BottomAppBar 或其他自定義組件。
floatingActionButton	用于定義浮動的操作按鈕，通常是一個 FloatingActionButton。
floatingActionButtonPosition	定義浮動按鈕的位置，如 FabPosition.End，FabPosition.Center， FabPosition.Start 或 FabPosition.EndOverlay。
snackbarHost	定義 Snackbar 的顯示位置，通常用于顯示簡短的提示信息。
containerColor	定義 Scaffold 容器的背景顏色。默認是 MaterialTheme.colorScheme.background，即 Material 主題的顏色方案中的背景顏色。
contentColor	定義 Scaffold 內容區域的顏色。默認是 contentColorFor(containerColor)，該函數會根據容器顏色自動選擇一個合適的內容顏色。
contentWindowInsets	定義窗口內邊距，這些內邊距通常用于考慮系統界面元素（如狀態欄、導航欄）的空間。默認是 ScaffoldDefaults.contentWindowInsets。
content	一個可組合函數，接受 PaddingValues 參數，用于定義 Scaffold 的主要內容。這個函數是必需的，因為它定義了用戶在應用中看到的主界面。

Scaffold 運行示例

下例是 Scaffold 的使用及運行結果。

@Composable
fun ScaffoldDemo() {Scaffold(topBar = {// 定義頂部應用欄的內容TopAppBar(title = { Text("頂部標題欄") })},bottomBar = {// 定義底部應用欄的內容BottomAppBar( containerColor = Color.Blue,contentColor = Color.White,) {Text(modifier = Modifier.fillMaxWidth(), text = "底部導航欄", fontSize = 20.sp, textAlign = TextAlign.Center)}},floatingActionButton = {// 定義浮動操作按鈕的內容FloatingActionButton(onClick = {}) {Icon(imageVector = Icons.Default.Add, contentDescription = "Add")}},floatingActionButtonPosition = FabPosition.Center,containerColor = Color.LightGray,contentColor = Color.Red,content = { paddingValues ->// 定義主要內容，可以使用 paddingValues 來添加內邊距Box(modifier = Modifier.fillMaxSize().padding(paddingValues)) {Text(modifier=Modifier.fillMaxSize(), text = "主界面", fontSize = 24.sp, textAlign = TextAlign.Center)}})
}