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")
                }
            }
        }
    )
}

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

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

1 个答案: