Jetpack 中的权重组合

Question

是否可以在 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_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <View
        android:layout_width="0dp"
        android:layout_height="100dp"
        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_width="0dp"
        android:layout_height="100dp"
        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_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <View
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:id="@+id/red"
        android:background="@color/red"
        android:layout_weight="1"/>
    <View
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:id="@+id/blue"
        android:background="@color/blue"
        android:layout_weight="2"/>
</LinearLayout>

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

Answer 1

有了1.0.x您可以使用 喜欢的东西：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")
    }
}

Answer 2

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

Modifier.weight（浮点数，布尔值）

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

 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
            )
        }
    }