我正在尝试创建具有两个视图的特定布局: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()
)
}
}
经过多次尝试,我找到了解决方案。我的错误是在设置约束之前调用 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))
}