每一个来自循环的元素都应该填满所在行中所有可用的空间。

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


}}

- CodingProfile

---

抱歉，我不明白你的意思。 - CodingProfile

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

您的BottomMenuItem是RowScope的扩展，因此它的顶层composable可以使用Row属性进行配置，例如weight。

上述代码的输出。

- z.g.y