android - 如何让 Jetpack 组合 IconButton 的宽度以适应儿童的宽度？

Question

我想IconButton在图标下方添加文字。我尝试将这些与宽度相关的方法应用于Modifier所有IconButton、Column和. 下面的代码是我得到的最接近的。结果看起来像这样。这就是我想要实现的目标。IconText

@Composable
fun IconButtonWithTextBelow(
    title: String,
    @DrawableRes imageId: Int,
    onClick: () -> Unit
) {
    IconButton(
        onClick = onClick,
        modifier = Modifier.requiredWidth(IntrinsicSize.Max)
    ) {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.requiredWidth(IntrinsicSize.Max)
        ) {
            Icon(
                painter = painterResource(id = imageId),
                contentDescription = title,
            )
            Text(
                text = title,
            )
        }
    }
}

Answer 1

顾名思义IconButton，它仅用于显示Icon. 即使你用静态大小修饰符增加容器的大小，你会发现点击它时的波纹仍然太小。

你可以使用TextButton，我可以很好地使用Icon+ Text，你只需要指定contentColor:默认IconButton使用LocalContentColor.current，所以你也可以使用它。

TextButton(
    onClick = { /*TODO*/ },
    colors = ButtonDefaults.textButtonColors(contentColor = LocalContentColor.current)
) {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
    ) {
        Icon(
            painter = painterResource(id = imageId),
            contentDescription = title,
        )
        Text(
            text = title,
        )
    }
}

但未来的实现可能会发生变化，毕竟TextButton名字只是说一下而已。Text

所以更好的选择是只clickable在你的 , 上使用修饰符Column，也许padding. 结果将几乎相同。

Column(
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
        .padding(10.dp)
        .clickable(
            onClick = onClick,
            role = Role.Button,
        )
) {
    Icon(
        painter = painterResource(id = imageId),
        contentDescription = title,
    )
    Text(
        text = title,
    )
}

Answer 2

IconButton 的大小受 48.dp 限制，因此您需要实现自己的 IconButton。您可以查看IconButton的源代码。