Gewichte in Jetpack komponieren

Ist es möglich, Gewichte in Jetpack Compose zu machen? Zum Beispiel möchte ich es so einrichten, dass ein Element als 1/3 eines Layouts gewichtet wird und das andere die restlichen 2/3 einnimmt.

Im XML/ViewGroup-Stil können Sie dies mit LinearLayouts und ConstraintLayouts erreichen. Zu meiner Bestürzung scheint es jedoch nicht möglich zu sein, Jetpack Compose zu verwenden.

Beispiel:

In ConstraintLayout geschieht dies wie folgt:

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

In LinearLayouts geschieht dies wie folgt:

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

Ich weiß, dass Sie Tabellen verwenden können, um zu bekommen gleichmäßig verteilte Sachen, aber ich will eine uneben Verteilung.

Du kannst den … benutzen Modifier.weight

Etwas wie:

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

Da “0.1.0-dev09”-Modifikatoren auf eine Schnittstelle verschoben werden, können Sie verwenden

Modifikator.weight(float, boolean)

um den vertikalen/horizontalen Raum zu teilen, der nach dem Messen ungewichteter untergeordneter Elemente verbleibt, und ihn entsprechend dieser Gewichtung zu verteilen

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

Die Version „0.1.0-dev04“ von Jetpack Compose enthält Änderungen und FlexRow ist veraltet. Folgende Lösung kann ich vorschlagen:

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

        }
    }
}

Ergebnis:

Das LayoutFlexibel(flex = _f) hilft uns, das Problem zu lösen, und Modifier kann auf jeden Container angewendet werden.

Verwenden Sie Modifier.weight(float) für die Objekte in einem Container. Sie können auch Constraintlayout oder Low Level verwenden Layout Zusammensetzbar. Sehen Sie sich das offizielle Compose-Layout-Codelab in Compose Pathways an, um weitere Informationen dazu zu erhalten

Compose wandelt den Zustand in UI-Elemente um.

Zusammensetzung von Elementen Anordnung von Elementen Zeichnung von Elementen

Standard-Layout-Komponenten

@Composable
fun ArtistCard() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

Verwenden Sie auf ähnliche Weise Row, um Elemente horizontal auf dem Bildschirm zu platzieren. Sowohl Column als auch Row unterstützen die Konfiguration der Ausrichtung der enthaltenen Elemente.

  @Composable
    fun ArtistCard(artist: Artist) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            Image(/*...*/)
            Column {
                Text(artist.name)
                Text(artist.lastSeenOnline)
            }
        }
    }

Verwenden Sie Box, um Elemente übereinander zu platzieren. Box unterstützt auch die Konfiguration einer bestimmten Ausrichtung der darin enthaltenen Elemente.

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(/*...*/)
        Icon(/*...*/)
    }
}

Row() {
    OutlinedTextField(
        modifier = modifier.weight(1f).clickable {

        },
        value = formatDate(date) ?: "",
        onValueChange = {  },
        label = { Text("Date") },
        singleLine = true,
        readOnly = true
    )

    Spacer(modifier = Modifier.padding(4.dp))

    OutlinedTextField(
        modifier = modifier.weight(1f),
        value = formatTime(date) ?: "",
        onValueChange = {  },
        label = { Text("Time") },
        singleLine = true
    )
}