Веса в джетпаке составляют

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

Вы можете использовать FlexRow и FlexColumn.

FlexRow: Композицию, которая размещает своих дочерних элементов в горизонтальной последовательности, назначая дочерние ширины в соответствии с их весы изгиба .

Дочерние элементы FlexRow могут быть:

• inflexible, что означает, что дочерний элемент не изгибается, и его следует измерять со свободными ограничениями для определенияего предпочтительная ширина
• expanded означает, что ребенок гибкий, и ему должна быть назначена ширина в соответствии с его гибким весом относительно его гибких дочерних элементов. Дочерний объект вынужден занимать всю ширину, назначенную родителем
• flexible аналогично расширенному, но дочерний элемент может оставить незанятую ширину.

Что-то вроде:

FlexRow {
            expanded(flex = 2f) {
                    //Just an example
                    Card(shape = RoundedCornerShape(8.dp), color = Color.Blue) {
                        Container(height = 200.dp, expanded = true){}
                    }
            }
            expanded(flex = 1f) {
                //Just an example
                Card(shape = RoundedCornerShape(8.dp), color = Color.Red) {
                    Container(height = 200.dp, expanded = true){}
                }
            }
        }