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

Posted 2023-04-19

【中文标题】使用权重修饰符在 LazyColumn 中排列单个项目

【英文标题】：Arrange a single item inside a LazyColumn by using weight modifier

【发布时间】：2021-11-07 02:19:11

【问题描述】：

我希望得到这样的结果。两个分别为 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：如果用户字体变大或屏幕旋转，他们将看不到按钮

【问题讨论】：

你有物品清单吗？

@GabrieleMariotti 没有。只有一项。它是一个启动画面，前 2/3 部分带有徽标，底部 1/3 部分带有文本和按钮

为什么你需要一个惰性列来作为启动画面？

@Shijilal 可以用一个简单的Column来实现，但是不清楚为什么这个屏幕应该有滚动条。在任何情况下，您都使用 3/4 和 1/4（不是 2/3 和 1/3）

@GabrieleMariotti。抱歉，它不是启动画面。它的登录屏幕。底部的文本用于任何错误消息和其他信息。所以有机会，文本更大。在这种情况下，将无法看到按钮。如果您旋转屏幕，情况也是如此。

【参考方案1】：

由于您只有一个项目，只需使用带有垂直滚动的Column：

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

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

【讨论】：

在主帖中添加了更多细节以更好地理解问题。

【参考方案2】：

您可以通过应用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))

垫片说明：

【讨论】：

这里没有滚动。

在主帖中添加了更多细节以更好地理解问题。

感谢您的努力。将东西放入 LazyColum 中，也可以滚动。