Jetpack 中的权重组成

Posted 2023-04-13

【中文标题】Jetpack 中的权重组成

【英文标题】：Weights in Jetpack compose

【发布时间】：2020-02-27 05:19:55

【问题描述】：

是否可以在 Jetpack Compose 中做权重？例如，我想将其设置为一个项目的权重为布局的 1/3，而另一个占据剩余的 2/3。

在 XML/ViewGroup 样式中，您可以使用 LinearLayouts 和 ConstraintLayouts 来实现这一点。然而，令我沮丧的是，使用 Jetpack Compose 似乎是不可能的。

示例：

在 ConstraintLayout 中，这样做如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <View
        android:layout_
        android:layout_
        android:id="@+id/red"
        android:background="@color/red"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/blue"
        app:layout_constraintHorizontal_weight="1"/>
    <View
        android:layout_
        android:layout_
        android:id="@+id/blue"
        android:background="@color/blue"
        app:layout_constraintStart_toEndOf="@id/red"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="2"/>
</androidx.constraintlayout.widget.ConstraintLayout>

在 LinearLayouts 中，这是按如下方式完成的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:orientation="horizontal">
    <View
        android:layout_
        android:layout_
        android:id="@+id/red"
        android:background="@color/red"
        android:layout_weight="1"/>
    <View
        android:layout_
        android:layout_
        android:id="@+id/blue"
        android:background="@color/blue"
        android:layout_weight="2"/>
</LinearLayout>

我知道您可以使用表格来获得均匀分布的东西，但我想要一个不均匀分布。

【参考方案1】：

您可以使用Modifier.weight 比如：

Row() 
    Column(
        Modifier.weight(1f).background(Blue))
        Text(text = "Weight = 1", color = Color.White)
    
    Column(
        Modifier.weight(2f).background(Yellow)
    ) 
        Text(text = "Weight = 2")
    

【讨论】：

哦，使用 Modifier.weight 是我最喜欢的新方法 :)

这应该被标记为正确答案。完美运行！

【参考方案2】：

由于“0.1.0-dev09”修饰符在界面上移动，您可以使用

Modifier.weight(float, boolean)

对未加权子元素测量后剩余的垂直/水平空间进行划分，并根据这个权重分配

 Column 
        Row(modifier = Modifier.weight(2.0f, true)) 
            Box (
                modifier = Modifier.fillMaxWidth().fillMaxHeight(),
                backgroundColor = Color.Red
            )
        
        Row(modifier = Modifier.weight(1.0f, true)) 
            Box (
                modifier = Modifier.fillMaxWidth().fillMaxHeight(),
                backgroundColor = Color.Blue,
                gravity = ContentGravity.Center
            ) 
                Text(text = "A sample text")
            
        
        Row(modifier = Modifier.weight(2.0f, true)) 
            Box (
                modifier = Modifier.fillMaxWidth().fillMaxHeight(),
                backgroundColor = Color.Yellow
            )
        
    

【讨论】：

默认值为true，不需要这么指定

【参考方案3】：

Jetpack Compose 的“0.1.0-dev04”版本包含更改，FlexRow 已弃用。我可以提出以下解决方案：

Row 
    Card(modifier = LayoutFlexible(1f), color = Color.Red) 
        Container(expanded = true, height = 50.dp) 

        
    
    Card(modifier = LayoutFlexible(2f), color = Color.Green) 
        Container(expanded = true, height = 50.dp) 

        
    

结果：

LayoutFlexible(flex = _f) 帮助我们解决了这个问题，Modifier 可以应用于任何容器。

【参考方案4】：

对容器内的对象使用 Modifier.weight(float)。 您还可以使用 constraintlayout 或 Low Level Layout Composable。查看 compose 路径中的官方 compose 布局代码实验室，了解更多信息