喷气背包中的重量组成

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>

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

Answer 1

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)帮助我们解决了这个问题，修饰符可以应用于任何容器。

Answer 2

由于“0.1.0-dev09”修饰符在接口上移动，因此可以使用

修饰语。权重（浮点，布尔值）

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

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

Answer 3

您可以使用< code>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")
    }
}