33

可以在 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>

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

4

4 回答 4

53

您可以使用类似的 东西：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")
    }
}

在此处输入图像描述

于 2019-10-31T21:57:46.877 回答
9

由于“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
            )
        }
    }
于 2020-04-17T02:33:50.417 回答
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)帮助我们解决了这个问题，修改器可以应用于任何容器。

于 2020-02-01T18:26:40.357 回答
1

对容器内的对象使用 Modifier.weight(float)。您还可以使用 constraintlayout 或 Low Level LayoutComposable。查看撰写路径中的官方撰写布局代码实验室以获取更多信息

于 2021-06-11T21:03:25.383 回答