循环中的每个元素都应填充行中可用的所有可用空间

Question

我有循环遍历的元素，单击的元素将背景更改为绿色。我希望每个元素都填充行中可用的所有可用空间。但是，如果我提供，weight(1f)它只显示一个占据所有空间的元素，但应该有三个元素或我从外部传递的任何元素数。

@Composable
fun BottomMenu(
    items: List<BottomMenuContent>,
    modifier: Modifier = Modifier,
    activeHighlightColor: Color = Green,
    activeTextColor: Color = Color.White,
    inactiveTextColor: Color = Color.Black,
    initialSelectedItemIndex: Int = 0
) {
    var selectedItemIndex by remember {
        mutableStateOf(initialSelectedItemIndex)
    }
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = modifier
            .fillMaxWidth()
            .background(Gray)
            .padding(4.dp)


    ) {
            items.forEachIndexed { index, item ->
                BottomMenuItem(
                    item = item,
                    isSelected = index == selectedItemIndex,
                    activeHighlightColor = activeHighlightColor,
                    activeTextColor = activeTextColor,
                    inactiveTextColor = inactiveTextColor
                ) {
                    selectedItemIndex = index
                }
        }

        }
    }

@Composable
fun BottomMenuItem(
    modifier: Modifier = Modifier,
    item: BottomMenuContent,
    isSelected: Boolean = false,
    activeHighlightColor: Color = Green,
    activeTextColor: Color = Color.White,
    inactiveTextColor: Color = Color.Black,
    onItemClick: () -> Unit
) {
Row( ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .clickable {
                    onItemClick()
                }
                .background(if (isSelected) activeHighlightColor else Color.Transparent)
                .weight(1f)
                .padding(top = 14.dp, bottom = 14.dp,)
  
        ) {
            Text(
                text = item.title,
                color = if(isSelected) activeTextColor else inactiveTextColor
            )
        }


}}

Answer 1

weight从框中取出并将其放入其父级中Row，我修改了您的代码，请查看weight放置的位置。

你的BottomMenu

@Composable
fun BottomMenu() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .background(Color.LightGray)
            .fillMaxWidth()
    ) {

        (0..7).forEach {
            BottomMenuItem()
        }
    }

}

你的BottomMenuItem

@Composable
fun RowScope.BottomMenuItem() {
    Row(
        modifier = Modifier.weight(1f) // remove the weight from the box inside and put it over here instead
    ) {
        Box(
            modifier = Modifier
                .background(Color.Green) 
                // remove the weigth(1f) from here
        ) {
            Text(
                modifier = Modifier.fillMaxWidth(),
                text = "Test",
                color = Color.DarkGray
            )
        }
    }
}

YourBottomMenuItem是 a 的扩展RowScope，因此它的顶层composable可以配置Row以下属性：weight

上面代码的输出。