在 Android Jetpack Compose 中创建带有图标的圆形按钮

在 Android Jetpack Compose 中创建带有图标的圆形按钮非常简单。下面给出一个示例代码，其中创建了一个带有加号图标的圆形按钮，点击按钮将会显示一个 Toast 提示。

示例代码

@Composable
fun IconCircleButton(icon: ImageVector, onClick: () -> Unit) {
    IconButton(
        onClick = onClick,
        modifier = Modifier
            .size(48.dp)
            .padding(8.dp)
            .background(Color.White, CircleShape)
    ) {
        Icon(
            imageVector = icon,
            contentDescription = null,
            tint = Color.Black
        )
    }
}

@Composable
fun IconCircleButtonScreen() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Icon Circle Button") }
            )
        }
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier.fillMaxSize()
        ) {
            IconCircleButton(
                icon = Icons.Default.Add,
                onClick = {
                    Toast
                        .makeText(
                            context,
                            "Add button clicked",
                            Toast.LENGTH_SHORT
                        )
                        .show()
                }
            )
        }
    }
}

解释

创建一个带有图标的圆形按钮需要使用 IconButton 和 Icon 组件。IconButton 会自动适应 Android 系统的主题色，因此不需要手动设置颜色。Icon 必须指定图标、图标的说明和渲染颜色。

该示例代码中使用了一个 Box 组件将圆形按钮居中，然后将该 Box 组件作为 Scaffold 的主体，这样就可以将圆形按钮放置在屏幕正中央。

效果演示

参考

• Jetpack Compose Documentation
• Jetpack Compose 布局基础