修饰符.weight()未在列中自动设置，无法添加

Question

我对jetpack compose是新手，也有一些使用flutter的经验，所以当我移动到jetpack compose时，它有点类似于flutter声明性UI风格，但我不太理解，就像在flutter中一样，当我想要扩展一些小部件并希望它占用全部可用空间时，我们可以使用Exapanded widget，如果我在列中使用它，它会自动添加1的flex或jetpack compose中的weight，所以我想在jetpack compose中做同样的事情，但它看起来像jetpack列，不能自动将weight添加到它的子项中，而且我也不能在<代码>D5Modifier.weight(1f)。当在列中使用这个Compoasable时，这个Modifier.weight(1f)必须通过参数来设置，我认为这很奇怪。

@Preview(showBackground = true, widthDp = 500, heightDp = 200)
@Composable
fun NetworkCardComposable(modifier: Modifier = Modifier) {
    Card(
        modifier = modifier
            .fillMaxSize(1f)
            .padding(16.dp),
        shape = RoundedCornerShape(16.dp),
        backgroundColor = colorResource(id = R.color.jazz_color_primary)
    ) {
        Row {
            Card(
                modifier = Modifier
                    .weight(2f)
                    .fillMaxSize()
                    .padding(8.dp),
                shape = RoundedCornerShape(16.dp),
            ) {
                Image(
                    modifier = Modifier
                        .padding(8.dp),
                    painter = painterResource(R.drawable.jazz_logo),
                    contentDescription = null,
                )
            }
            Row(
                modifier = Modifier
                    .weight(2f)
                    .fillMaxSize(),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxWidth(),
                    text = "Bundles & Offers",
                    color = Color.White,
                    textAlign = TextAlign.Center,
                    fontSize = MaterialTheme.typography.h5.fontSize,
                )
                Icon(
                    modifier = Modifier.size(56.dp),
                    imageVector = Icons.Default.ChevronRight,
                    tint = Color.White,
                    contentDescription = null,
                )
            }
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun networkCard() {
    Column(Modifier.fillMaxSize()) {
        NetworkCardComposable(Modifier.weight(1f))
        NetworkCardComposable(Modifier.weight(1f))
        NetworkCardComposable(Modifier.weight(1f))
        NetworkCardComposable(Modifier.weight(1f))
    }
}

所有人都认为我已经得到了我想要的布局，但如果有任何更好的方法，请回答

Answer 1

Jetpack Compose旨在提供对UI的最大控制。因此，默认情况下，像column这样的容器的元素默认包装内容。如果您希望它们占用容器的最大可用空间，正确的方法是使用Modifier.fillMaxSize()

就权重而言，如果在容器中添加多个元素时没有显式指定，则会根据所需的最小维度相应地计算权重(即，再次使用wrapContentSize ())