如何在Jetpack Compose中为指定图标上方添加说明文字？

你可以通过**垂直布局组件（Column）**来实现图标上方显示说明文字的效果，核心思路是将文本和图标按垂直方向排列，还可以封装成可复用组件方便多处调用。

基础实现代码 #

先封装一个通用的LabeledIcon组件，支持自定义标签、图标、样式和间距：

@Composable
fun LabeledIcon(
    label: String,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    labelStyle: TextStyle = TextStyle(fontSize = 12.sp, color = Color.Gray),
    horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
    spacing: Dp = 4.dp
) {
    Column(
        modifier = modifier,
        horizontalAlignment = horizontalAlignment,
        verticalArrangement = Arrangement.spacedBy(spacing)
    ) {
        Text(
            text = label,
            style = labelStyle,
            textAlign = TextAlign.Center
        )
        icon()
    }
}

调用示例 #

在需要的地方直接使用这个组件，比如横向排列一组带标签的图标：

@Composable
fun LabeledIconGroup() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 8.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        LabeledIcon(
            label = "编辑",
            icon = { Icon(Icons.Default.Edit, contentDescription = "编辑图标") }
        )
        LabeledIcon(
            label = "删除",
            icon = { Icon(Icons.Default.Delete, contentDescription = "删除图标") }
        )
        LabeledIcon(
            label = "收藏",
            icon = { Icon(Icons.Default.FavoriteBorder, contentDescription = "收藏图标") }
        )
    }
}

自定义调整 #

• 如果需要标签左对齐，将horizontalAlignment参数设为Alignment.Start即可
• 可以通过labelStyle修改标签的字体大小、颜色、字重等样式
• 调整spacing参数可以改变标签和图标之间的垂直距离

内容的提问来源于stack exchange，提问作者RitchyCZE