如何在 TopAppBar 上的 IconButton 下方添加文本？

【问题标题】：How to add text below IconButton on TopAppBar?如何在 TopAppBar 上的 IconButton 下方添加文本？
【发布时间】：2020-10-21 18:03:43
【问题描述】：

我试图在 IconButton 下方放置一些文本，但我就是找不到方法。相反，它只是在 IconButton 旁边 TopAppBar

 Column {
        TopAppBar(
                modifier = modifier,
                elevation = 0.dp,
                contentColor = MaterialTheme.colors.onSurface,
                title = {
                    Text(text = "Jetpack Compose")
                },
                actions = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Filled.Add, tint = Red)
                    }
                    Text(text = "Add")
                }
        )
    }

【问题讨论】：

标签： android android-jetpack android-jetpack-compose

【解决方案1】：

TopAppBar 动作在Row 内对齐，因此如果您在其中添加任何组件，它将水平增长，因此您可以在IconButton 内添加文本和按钮，因为图标只是Composable 功能（但是你可以使用Button，当我们点击它会有更多的高光波纹）

例如：

Column {
    TopAppBar(
        modifier = modifier,
        elevation = 0.dp,
        contentColor = MaterialTheme.colors.onSurface,
        title = {
            Text(text = "Jetpack Compose")
        },
        actions = {
            IconButton(onClick = {  }) {
                Column {
                    Icon(Icons.Filled.Add, Modifier.align(Alignment.CenterHorizontally), tint = Red)
                    Text("Add")
                }
            }
        }
    )
}

注意：我在IconButton 中使用Column，因为IconButton 内容将再次出现在Box 中。

【讨论】：