使用权重修饰符在 LazyColumn 中排列单个项目

Arrange a single item inside a LazyColumn by using weight modifier

我希望得到这样的结果。两个分别为 2/3 大小和 1/3 大小的块。

我用这段代码得到了预期的结果。

@Preview(showBackground = true)
@Composable
fun LayoutCheck() {

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Surface(
        modifier = Modifier
            .width(200.dp)
            .weight(3f),
        color = MaterialTheme.colors.primary
    ) {}
    Surface(
        modifier = Modifier
            .width(200.dp)
            .weight(1f),
        color = MaterialTheme.colors.secondary
    ) {}
    }
}

但是当我把它放在一个惰性列中时,似乎没有任何效果。甚至没有显示。

@Preview(showBackground = true)
@Composable
fun LayoutCheck() {
Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(20.dp)
    ) {
        item {
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Surface(
                    modifier = Modifier
                        .width(200.dp)
                        .weight(3f),
                    color = MaterialTheme.colors.primary
                ) {}
                Surface(
                    modifier = Modifier
                        .width(200.dp)
                        .weight(1f),
                    color = MaterialTheme.colors.secondary
                ) {}
                }

            }
        }
    }
}

如果我去掉重量并增加一些高度,它就可以了。但我不想在那里硬编码。那么如何让它与重量一起工作。期待一些帮助..

谢谢

注意:我想要滚动功能,这就是为什么要使用 LazyColumn

真实场景: 登录屏幕,前 2/3 部分有徽标,底部 1/3 部分有文本和按钮

场景 1:完美工作:

场景 2:如果用户字体变大或屏幕旋转,他们将看不到按钮

因为您只有一个项目,所以只需使用带有 verticalScroll 的 Column

val scrollState = rememberScrollState()
Column(
    modifier = Modifier
        .verticalScroll(scrollState),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    //...
}

此外,如果您想要 2/3 和 1/3,请在第一个 Surface 中使用 weight(2f) 修饰符。

您可以通过应用 weight 修饰符来防止调整文本大小。相反,我建议您使元素间距灵活,如下所示:

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Spacer(Modifier.weight(1f))
    Image(
        painter = painterResource(id = R.drawable.my_image),
        contentDescription = "",
    )
    Spacer(Modifier.weight(1.35f))
    Text(
        "Your app is being reviewed",
    )
    Spacer(Modifier.weight(0.2f))
    Button(onClick = { /*TODO*/ }) {
        Text("Log out")
    }
    Spacer(Modifier.weight(0.2f))
}

垫片说明: