尝试使用 Kotlin 理解 Android Studio 中的 UI，并有一个关于 modifier.weight() 的问题

Question

所以我有一个关于理解modifier.wheigt()的问题，所以据我了解该函数只是划分空间，我正在做关于“ComposeQuadrant”的实践教程，教程的解决方案是：

文字

所以我想尝试一个天真的替代方案，删除了每个modifier.wheigt(1f)命令并使用两行和两列，就像->

所以而不是

@Composable
fun ComposeQuadrantApp() {
    Column(Modifier.fillMaxWidth()) {
        Row(Modifier.weight(1f)) {
            ComposableInfoCard(title = stringResource(R.string.c1t1),
                description = stringResource(R.string.c1t2),
                backgroundColor = Color(0xFFEADDFF),
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = stringResource(R.string.c2t1),
                description = stringResource(R.string.c2t2),
                backgroundColor = Color(0xFFD0BCFF),
                modifier = Modifier.weight(1f)
            )
        }
        Row(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = stringResource(R.string.c3t1),
                description = stringResource(R.string.c3t2),
                backgroundColor = Color(0xFFB69DF8),
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = stringResource(R.string.c4t1),
                description = stringResource(R.string.c4t2),
                backgroundColor = Color(0xFFF6EDFF),
                modifier = Modifier.weight(1f)
            )
        }
    }
}

我删除了每个 Modifier.weight 并像这样编辑它：

@Composable
fun ComposeQuadrantApp2() {
    Column(Modifier.fillMaxWidth()) {
        Row() {
            Column(){
                ComposableInfoCard(title = stringResource(R.string.c1t1),
                    description = stringResource(R.string.c1t2),
                    backgroundColor = Color(0xFFEADDFF),
                    modifier = Modifier.weight(1f)
                )
                ComposableInfoCard(
                    title = stringResource(R.string.c2t1),
                    description = stringResource(R.string.c2t2),
                    backgroundColor = Color(0xFFD0BCFF),
                    modifier = Modifier.weight(1f)
                )
            }

        }
        Row() {
            Column(){
                ComposableInfoCard(
                    title = stringResource(R.string.c3t1),
                    description = stringResource(R.string.c3t2),
                    backgroundColor = Color(0xFFB69DF8)
                )
                ComposableInfoCard(
                    title = stringResource(R.string.c4t1),
                    description = stringResource(R.string.c4t2),
                    backgroundColor = Color(0xFFF6EDFF)
                )
            }

        }
    }
}

差异就像差异

Answer 1

weight()

修改器以给定的比例分配元素之间的可用空间。通过删除此修饰符，您可以让 UI 元素设置自己的大小（这很可能是

fillMaxWidth()

），因此 Row 中的第二个元素不会显示