如何在BottomAppBar中设置Arrangement.SpaceEvenly布局？

由于BottomAppBar并未直接提供horizontalArrangement参数，但它的内容处于RowScope中，我们可以通过以下两种方式实现内容的均匀分布：

方法一：嵌套Row组件 #

在BottomAppBar的content中嵌套一个新的Row，显式设置其horizontalArrangement为Arrangement.SpaceEvenly，将需要布局的内容放在这个嵌套Row内即可：

BottomAppBar(
    modifier = Modifier.fillMaxWidth(),
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
    tonalElevation = 4.dp,
    contentPadding = PaddingValues(8.dp),
    windowInsets = BottomAppBarDefaults.windowInsets
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        IconButton(onClick = { /* 点击事件 */ }) {
            Icon(Icons.Filled.Home, contentDescription = "首页")
        }
        IconButton(onClick = { /* 点击事件 */ }) {
            Icon(Icons.Filled.Search, contentDescription = "搜索")
        }
        IconButton(onClick = { /* 点击事件 */ }) {
            Icon(Icons.Filled.Person, contentDescription = "我的")
        }
    }
}

方法二：为子项添加weight修饰符 #

利用RowScope提供的weight修饰符，给每个子组件设置weight(1f)，让它们平分BottomAppBar的水平空间，从而实现均匀分布：

BottomAppBar(
    modifier = Modifier.fillMaxWidth(),
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
    tonalElevation = 4.dp,
    contentPadding = PaddingValues(8.dp),
    windowInsets = BottomAppBarDefaults.windowInsets
) {
    IconButton(
        onClick = { /* 点击事件 */ },
        modifier = Modifier.weight(1f)
    ) {
        Icon(Icons.Filled.Home, contentDescription = "首页")
    }
    IconButton(
        onClick = { /* 点击事件 */ },
        modifier = Modifier.weight(1f)
    ) {
        Icon(Icons.Filled.Search, contentDescription = "搜索")
    }
    IconButton(
        onClick = { /* 点击事件 */ },
        modifier = Modifier.weight(1f)
    ) {
        Icon(Icons.Filled.Person, contentDescription = "我的")
    }
}

这两种方法都能实现BottomAppBar内容的均匀分布，你可以根据实际需求选择合适的方式。

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