Android 喷气背包重量

Android 喷气背包重量,android,kotlin,android-jetpack-compose,Android,Kotlin,Android Jetpack Compose,有可能在喷气背包里做重量测试吗?例如,我想将其设置为这样一种方式:一个项目的权重为布局的1/3,另一个占据剩余的2/3 在XML/ViewGroup样式中,可以使用LinearLayouts和ConstraintLayouts实现这一点。然而,令我沮丧的是,使用Jetpack Compose似乎不可能 示例: 在ConstraintLayout中,此操作如下所示: <?xml version="1.0" encoding="utf-8"?> <androidx.constrai

有可能在喷气背包里做重量测试吗?例如,我想将其设置为这样一种方式:一个项目的权重为布局的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>
<?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>

在线性布局中,此操作如下所示:

<?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>
<?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>

我知道您可以使用表来获得均匀分布的内容,但我希望不均匀分布。

使用
1.0.0
(使用
1.0.0-beta08测试)您可以使用
比如:

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

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

        }
    }
}
结果:

布局灵活(flex=\u f)帮助我们解决这个问题,修改器可以应用于任何容器。

由于“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
            )
        }
    }
对容器内的对象使用Modifier.weight(float)。
您还可以使用constraintlayout或低级
布局
可组合。查看compose pathways中的官方compose layout codelab,了解更多关于使用Modifier.weight的信息,这是我最喜欢的新方法:)