Android Jetpack Compose 簡短訊息通知 Snackbar 示範

Jetpack Compose Scaffold 是 Jetpack Compose UI 中預先設計的布局，使用 Scaffold 能夠快速的建立畫面基本結構，Scaffold 包含了中心內容、上方列、下方導覽列、測邊內容、浮動按鈕、還有本次要介紹的簡短訊息通知 Snackbar。
註：Scaffold 也可以不使用 Scaffold 就獨立顯示，但是筆者在測試時未搭配 Scaffold 時 Snackbar 無法正常自動關閉，需要另外撰寫計時器手動指定關閉。

依賴

筆者示範的 Snackbar 是使用 androidx.compose.material3.Scaffold ，在筆者測試時新建立的專案依賴如下:

    
dependencies {
    implementation 'androidx.compose.material3:material3'
}
    

使用 Scaffold 會出現下列錯誤:

    
This material API is experimental and is likely to change or to be removed in the future.
    

顯示 Scaffold 是實驗性功能，未來可能會修改或刪除，需要加上 @OptIn(ExperimentalMaterial3Api::class) 註解才可以執行:

    
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SnackbarTest(modifier: Modifier = Modifier) {
    val snackbarHostState = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()
    Scaffold(
        snackbarHost = { SnackbarHost(snackbarHostState) },
        floatingActionButton = {
            ExtendedFloatingActionButton(
                onClick = {
                    scope.launch {
                        snackbarHostState.showSnackbar("這是 Snackbar 訊息!")
                    }
                }
            ) { Text("顯示 snackbar") }
        },
        content = { innerPadding ->
            Text(
                text = "內容",
                modifier = Modifier
                    .padding(innerPadding)
                    .fillMaxSize()
                    .wrapContentSize()
            )
        }
    )
}
    

筆者查看 Compose Material 3 依賴，發現資料更新時間是 2023-02-08 (撰寫本文的時間為 2023-07-16)目前穩定版是 1.0.1 ，Alpha 版為 1.1.0-alpha06 ，筆者嘗試將 material3 版號改為 1.0.1 後還是會有此警告訊息，也發現其實當前最新版本為 1.1.1 ，指定版號為 1.1.1 後就不會再出現此警告訊息。

    
dependencies {
    implementation 'androidx.compose.material3:material3:1.1.1'
}
    

Snackbar 示範

    
@Composable
fun SnackbarTest(modifier: Modifier = Modifier) {
    val snackbarHostState = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()
    Scaffold(
        snackbarHost = { SnackbarHost(snackbarHostState) },
        floatingActionButton = { // 浮動按鈕
            ExtendedFloatingActionButton(
                onClick = {
                    scope.launch {
                        snackbarHostState.showSnackbar("這是 Snackbar 訊息!")
                    }
                }
            ) { Text("顯示 snackbar") }
        },
        content = { innerPadding ->
            Text(
                text = "內容",
                modifier = Modifier
                    .padding(innerPadding)
                    .fillMaxSize()
                    .wrapContentSize()
            )
        }
    )
}
    

註： Scaffold 必須要有 content ，且 content 內需要指定 PaddingValues 參數，且必須要被使用，最簡單的範例如下:

    
@Composable
fun SnackbarTest(modifier: Modifier = Modifier) {
    Scaffold(
        content = { innerPadding ->
            Column(
                Modifier
                    .padding(innerPadding)
            ) {
            }
        },
    )
}
    

參考資料：
Android developers - Compose Material 3
Android developers - androidx.compose.material3#Snackbar