Android 中的 Snackbar 使用 Jetpack Compose

先决条件：

Android 中的 Snackbar Material Design 组件
Android 中的 Jetpack Compose

Snackbar 是一个轻量级的小部件，它们用于在应用程序底部显示消息。它是在 Material Design 库中引入的，作为 Toast 的替代品。在本文中，我们将解释如何使用 Jetpack Compose 创建 Snackbar。下面是示例图片，显示我们将要构建的内容。

分步实施

第 1 步：创建一个新项目

要使用 Jetpack Compose 在 Android Studio 中创建新项目，请参阅如何使用 Jetpack Compose 在 Android Studio Canary 版本中创建新项目。

第 2 步：使用 MainActivity.kt

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。

Kotlin

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposePracticeTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = Color.White) {
                    Column(modifier = Modifier.padding(10.dp)) {
                        // call the function which contains all the snackbars
                        SnackBars()
                    }
                }
            }
        }
    }
}
  
// In order to use compose properties annotate with @Compose
@Preview
@Composable
fun SnackBars() {
    Text(text = "Snackbars", style = typography.h6, modifier = Modifier.padding(8.dp))
    // Normal Snackbar
    Snackbar(modifier = Modifier.padding(4.dp)) {
        Text(text = "This is a basic snackbar")
    }
    // Snackbar with action item
    Snackbar(
        modifier = Modifier.padding(4.dp),
        action = {
            TextButton(onClick = {}) {
                Text(text = "Remove")
            }
        }
    ) {
        Text(text = "This is a basic Snackbar with action item")
    }
  
   // Snackbar with action item below text
    Snackbar(
        modifier = Modifier.padding(4.dp),
        actionOnNewLine = true,
        action = {
            TextButton(onClick = {}) {
                Text(text = "Remove")
            }
        }
    ) {
        Text(text = "Snackbar with action item below text")
    }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗？