Android: Jetpack Compose：如何创建带有图标的按钮？

Question

这个问题更多的是关于为什么Jetpack Compose如此不直观。我正在尝试更好地理解这个库。

以下是可组合元素：

fun RoundedButton(modifier: Modifier, onClick: () -> Unit) {
    Box(modifier = modifier.padding(horizontal = 10.dp)) {
        Button(
            onClick = { /* ... */ },
            shape = CircleShape,
        ) {
            // Inner content including an icon and a text label
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "Favorite",
                modifier = Modifier.size(20.dp)
            )
        }

    }
}

我理解了

因此，人们会认为，为了使其变成圆角，只需要设置大小（宽度和高度）为一个值，如果这样做

@Composable
fun RoundedButton(modifier: Modifier, onClick: () -> Unit) {
    Box(modifier = modifier.padding(horizontal = 10.dp)) {
        Button(
            onClick = { /* ... */ },
            shape = CircleShape,
            modifier = modifier.size(40.dp)
        ) {
            // Inner content including an icon and a text label
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "Favorite",
                modifier = Modifier.size(20.dp)
            )
        }

    }
}

我理解了。

问题：

我知道还有其他变体的Button，比如IconButton等等，但为什么要把简单的事情搞得这么复杂，以至于你不能从Button到达RoundedButton或IconButton？

- Giridhar Karnik

---

Button() 来自 Compose Material。Material Design 是一种有主见的设计系统，包括最小填充等内容。如果您不喜欢这些观点，请不要使用 Compose Material，而是基于非 Material 组合构建自己的设计系统。或者，在 Compose Material 中找到更适合您需求的其他组合构件，例如 FloatingActionButton() 可能适用于您的用例。 - CommonsWare

请查看 https://dev59.com/olEG5IYBdhLWcg3wZcZh，了解如何使用Jetpack Compose创建圆形轮廓按钮。 - Gabriele Mariotti

Answer 1

Button合成控件有一个默认的contentPadding属性。

object ButtonDefaults {

    private val ButtonHorizontalPadding = 24.dp
    private val ButtonVerticalPadding = 8.dp

    ...
}

这就是为什么当你将大小设置为40.dp时，Icon不可见。如果你将contentPadding设置为1.dp（我不确定是否可以使用0.dp），那么你就可以看到Icon了。

@Composable
fun RoundedButton(modifier: Modifier, onClick: () -> Unit) {
    Box(modifier = modifier.padding(horizontal = 10.dp)) {
        Button(
            onClick = { /* ... */ },
            shape = CircleShape,
            modifier = modifier.size(40.dp),
            contentPadding = PaddingValues(1.dp)
        ) {
            // Inner content including an icon and a text label
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "Favorite",
                modifier = Modifier.size(20.dp)
            )
        }

    }
}

- Hamed