回圈中的每個元素都應填充行中可用的所有可用空間-有解無憂

我有回圈遍歷的元素，單擊元素將背景更改為綠色。我希望每個元素都填充行中可用的所有可用空間。但是，如果我提供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
            )
        }


}}

uj5u.com熱心網友回復：

從盒子中取出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

上面代碼的輸出。

回圈中的每個元素都應填充行中可用的所有可用空間

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/514405.html

標籤：科特林android-jetpack-compose

上一篇：比較Kotlin中的日期

下一篇：自定義通知視圖不顯示影像