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

Question

我尝试在 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")
                }
        )
    }

Answer 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 中。