Jetpack Compose 中视图之间的对齐

Question

我正在将 Android XML 视图迁移到 Jetpack Compose。有两个 Text 和一个 Switch，必须考虑这个规则。

• 我的第一个文本必须与顶部和开始对齐。
• 开关必须与顶部和末端对齐。此外，本文和 开关必须具有相同的高度并垂直对齐。
• 其他文本必须放置在第一个文本下方，并且不能使用 Switch 下面的空间。

@Composable
fun ComposeConstraintLayout() {
    Row(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color(red = 0xAA, green = 0xFF, blue = 0xCC))
            .padding(16.dp),
        verticalAlignment = Alignment.Top,
    ) {
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .weight(1f)
                .padding(start = 16.dp),
        ) {
            Text(
                text = "Enable your option",
                fontSize = 20.sp,
                color = Color.Black,
                modifier = Modifier
                    .fillMaxWidth()
                    .background(color = Color(red = 0x00, green = 0xAA, blue = 0x00))
                    .padding(end = 8.dp),
            )

            Text(
                text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
                fontSize = 14.sp,
                color = Color.Black,
                modifier = Modifier
                    .fillMaxWidth()
                    .background(color = Color(red = 0x00, green = 0xEE, blue = 0xEE))
                    .padding(end = 8.dp),
            )
        }

        Switch(
            checked = false,
            onCheckedChange = {},
            modifier = Modifier
                .align(Alignment.Top)
                .background(color = Color(red = 0xA3, green = 0xD4, blue = 0x00)),
        )
    }

结果不太好。

我想要找到的结果。

当我从 Android XML 视图迁移到 Jetpack Compose 时，我也粘贴了代码

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_margin="10dp"
    android:background="#AAFFCC"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/switchRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#AA0000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center_vertical"
        android:text="Enable your option"
        android:background="#00AA00"
        app:layout_constraintBottom_toBottomOf="@+id/switchRight"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/switchRight"
        app:layout_constraintTop_toTopOf="@+id/switchRight" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#A3D400"
        app:layout_constraintTop_toBottomOf="@+id/tv1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/switchRight"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."

</androidx.constraintlayout.widget.ConstraintLayout>

谢谢

Answer 1

        @Composable
        fun ComposeConstraintLayout() {
        Row(
            modifier = Modifier
                .fillMaxSize()
                .background(color = Color(red = 0xAA, green = 0xFF, blue = 0xCC))
                .padding(16.dp),
        ) {
    
            Row() {
                Column(
                    modifier = Modifier
                        .fillMaxHeight()
                        .weight(1f)
                        .padding(start = 16.dp),
                ) {
    
                        Text(
                            text = "Enable your option",
                            fontSize = 20.sp,
                            color = Color.Black,
                            modifier = Modifier
                                .height(height = 48.dp)
                                .fillMaxWidth()
                                .background(color = Color(red = 0x00, green = 0xAA, blue = 0x00))
                                .padding(end = 8.dp).wrapContentHeight(align = Alignment.CenterVertically),
                        )
                    
    
                    Text(
                        text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
                        fontSize = 14.sp,
                        color = Color.Black,
                        modifier = Modifier
                            .fillMaxWidth()
                            .background(color = Color(red = 0x00, green = 0xEE, blue = 0xEE))
                            .padding(end = 8.dp),
                    )
                }
                Switch(
                    checked = false,
                    onCheckedChange = {},
                    modifier = Modifier
                        .align(Alignment.Top)
                        .background(color = Color(red = 0xA3, green = 0xD4, blue = 0x00)),
                )
            }
    
    
        }

}