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等，但是为什么要把简单的事情变得如此复杂以至于你无法到达RoundedButton或IconButton来自 a Button？

Answer 1

可组合项Button有一个默认值contentPadding。

object ButtonDefaults {

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

    ...
}

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

@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)
            )
        }

    }
}