技術標籤：Jetpack-ComposeJetpackComposeScaffoldSnackBar腳手架

Jetpack Compose - Scaffold、SnackBar

• • 0、介紹
  • 1、屬性一覽
  • 2、使用示例
  • 3、版本更新
  • 4、未解決問題

Compose系列文章，請點原文閱讀。原文，是時候學習Compose了！

0、介紹

腳手架實現了Material設計的頁面基本結構。該元件通過確保其適當的佈局策略從而將其他的多個元件組合在一起構成頁面。

其實也就是說該元件提供了組合各個元件的API，包括標題欄、底部欄、SnackBar（類似吐司功能）、浮動按鈕、抽屜元件、剩餘內容佈局等，讓我們可以快速定義一個基本的頁面結構。

接下來通過其引數我們可以很簡單的理解這個函式的作用，同時也將SnackBar結合進去。

1、屬性一覽

【目前基於alpha 11版本】函式如下：

@Composable fun Scaffold(
    modifier: Modifier = Modifier, 
    scaffoldState: ScaffoldState = rememberScaffoldState(), 
    topBar: () -> Unit = emptyContent(), 
    bottomBar: () -> Unit = emptyContent(), 
    snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) }, 
    floatingActionButton: () -> Unit = emptyContent(), 
    floatingActionButtonPosition: FabPosition = FabPosition.End, 
    isFloatingActionButtonDocked: Boolean = false, 
    drawerContent: ColumnScope.() -> Unit = null, 
    drawerGesturesEnabled: Boolean = true, 
    drawerShape: Shape = MaterialTheme.shapes.large, 
    drawerElevation: Dp = DrawerDefaults.Elevation, 
    drawerBackgroundColor: Color = MaterialTheme.colors.surface, 
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor), 
    drawerScrimColor: Color = DrawerDefaults.scrimColor, 
    backgroundColor: Color = MaterialTheme.colors.background, 
    contentColor: Color = contentColorFor(backgroundColor), 
    bodyContent: (PaddingValues) -> Unit
): Unit
 

屬性引數含義：

2、使用示例

我們使用Scaffold可以很方便的實現包含抽屜佈局的UI，程式碼如下：

@Composable
fun ScaffoldDemo() {

    val scaffoldState = rememberScaffoldState()
    Scaffold(
        scaffoldState = scaffoldState,
        drawerContent = {

            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "抽屜元件中內容")
            }

        },

        //標題欄區域
        topBar = {
            TopAppBar(
                title = { Text(text = "腳手架示例") },
                navigationIcon = {
                    IconButton(
                        onClick = {
                            scaffoldState.drawerState.open()
                        }
                    ) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = null
                        )
                    }
                }
            )
        },

        //懸浮按鈕
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("懸浮按鈕") },
                onClick = { }
            )
        },
        floatingActionButtonPosition = FabPosition.End,

        //螢幕內容區域
        bodyContent = {

            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "螢幕內容區域")
            }
        },
    )
}

實現效果如下所示：

一個很簡單的側滑抽屜的功能就完成了。
接下來我們使用下SnackBar的功能，新增如下相關的引數，然後我們在點選懸浮按鈕的時候新增點選事件，如下所示：

val scope = rememberCoroutineScope()

//懸浮按鈕
floatingActionButton = {
    ExtendedFloatingActionButton(
        text = { Text("懸浮按鈕") },
        onClick = {
            scope.launch {
                scaffoldState.snackbarHostState.showSnackbar("點選了懸浮按鈕")
            }
        }
    )
},

SnackBar顯示效果如下：

當然瞭如果你想自定義SnackBar顯示的外觀也可以通過snackbarHost引數來定義，如下我們定義了一個紅色背景，白色內容，切角邊框的SnackBar：

snackbarHost = {
    SnackbarHost(it) { data ->
        Snackbar(
            snackbarData = data,
            backgroundColor = myRed,
            contentColor = Color.White,
            shape = CutCornerShape(10.dp)
        )
    }
},

顯示效果如下所示：

3、版本更新

• 暫無

4、未解決問題

暫無。關於Scaffold官方還有另外兩種實現：BackdropScaffold和BottomSheetScaffold，具體使用上沒有什麼大的問題，和Scaffold類似，大家可以自定執行檢視相關效果，如果是自己平常開發中需要的，那麼直接使用即可。