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

Question

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

@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的源代码。