将 XML 约束布局转换为 Jetpack Compose - 链式、偏差

Question

我正在尝试创建具有两个视图的特定布局：TextView 和 ImageView。 TextView 是动态的，这意味着文本的长度可以变化。如果文本的长度小于设备的宽度，则 ImageView 应与 TextView 的末尾对齐。但是，如果文本的长度超过设备的宽度，则 ImageView 应位于设备宽度的末尾。文本可以跨多行，具体取决于内容。

我刚刚开始使用 Jetpack Compose，并使用 XML 的 ConstraintLayout 创建了一个布局。我正在尝试将此布局转换为 Jetpack Compose，但我不确定 Jetpack Compose 中

layout_constraintHorizontal_bias

、

layout_constraintHorizontal_chainStyle

和

layout_constrainedWidth

的等效方法。

这是我正在使用的完整 XML 代码：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/image"
        android:text="lorem epsum loremsum loremlorem epsum loremsum loremlorem epsum loremsum loremlorem epsum loremsum loremlorem epsum loremsum lorem"
        app:layout_constraintStart_toStartOf="parent"/>
    <ImageView
        android:id="@+id/image"
        android:layout_width="14dp"
        android:layout_height="14dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/textview"
        app:layout_constraintBottom_toBottomOf="@id/textview"
        app:layout_constraintStart_toEndOf="@+id/textview"
        android:src="@drawable/ic_information_grey"/>

</androidx.constraintlayout.widget.ConstraintLayout>

我尝试的是：

@Composable
fun CustomLayout(inputText: String) {
    ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
    val (text, image) = createRefs()

    val chain = createHorizontalChain(text,image, chainStyle = ChainStyle.Packed(0F))
    constrain(chain){
        start.linkTo(text.start)
        end.linkTo(image.end)
    }
    Text(
        text = inputText,
        modifier = Modifier
            .constrainAs(text) {
                start.linkTo(parent.start)
                end.linkTo(image.start)
                top.linkTo(parent.top)
                width = Dimension.preferredWrapContent
            }.wrapContentSize()
    )

    Image(
        painter = painterResource(id = R.drawable.ic_information_grey),
        contentDescription = null,
        modifier = Modifier
            .size(14.dp)
            .constrainAs(image) {
                end.linkTo(parent.end)
                top.linkTo(text.top)
                start.linkTo(text.end)
                width = Dimension.wrapContent
            }.wrapContentSize()
    )
}
}

Answer 1

我们可以添加填充值为 false 的权重，而不是使用约束布局。

            Row(modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .padding(vertical = 5.dp, horizontal = 10.dp),
                verticalAlignment = Alignment.CenterVertically) {
                Text(
                    text = description,
                    style = AITypography.current.bodyXSmall,
                    color = aiTextHeadingDark,
                    modifier = Modifier.weight(1f, fill = false)
                )
                Icon(
                    modifier = Modifier
                        .defaultMinSize(24.dp)
                        .clickable { onInformationButton() },
                    painter = painterResource(id = R.drawable.ic_information_grey),
                    contentDescription = null
                )
            }

Answer 2

经过多次尝试，我找到了解决方案。我的错误是在设置约束之前调用 createHorizontalChain 。在定义文本和图像组件后，我现在已将 createHorizontalChain 函数移至末尾。这是因为应该在定义组件并设置其约束之后调用 createHorizontalChain 函数。

ConstraintLayout(modifier = Modifier.fillMaxWidth().padding(top = 5.dp, start = 10.dp, bottom = 10.dp, end = 5.dp)) {
        val (text, image) = createRefs()

        Text(
            text = description.toString(),
            modifier = Modifier
                .constrainAs(text) {
                    start.linkTo(parent.start)
                    width = Dimension.preferredWrapContent
                }
                .wrapContentSize()
        )

        Image(
            painter = painterResource(id = R.drawable.ic_information_grey),
            contentDescription = null,
            modifier = Modifier
                .size(14.dp)
                .constrainAs(image) {
                    start.linkTo(text.end)
                    top.linkTo(text.top)
                    end.linkTo(parent.end)
                    width = Dimension.wrapContent
                }
                .wrapContentSize()
                .padding(start = 4.dp)
                .noRippleClickable {
                    onInformationButton()
                }
        )

        createHorizontalChain(text, image, chainStyle = ChainStyle.Packed(0F))
    }