如何使中间视图位于两个图像之间的边界？ （JetpackCompose）

Question

我有这样的看法

@Composable
fun LongText() {
    ConstraintLayout(

    ) {
        val (leftImg, headerTitle, rightImg) = createRefs()

        Image(
            modifier = Modifier
                .constrainAs(leftImg) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    bottom.linkTo(parent.bottom)
                },
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = ""
        )

        Text(
            text = "LONGTEXTLONGTEXTLONGTEXTLONGTEXTLONGTEXT",
            textAlign = TextAlign.Left,
            modifier = Modifier
                .padding(start = 8.dp)
                .constrainAs(headerTitle) {
                    start.linkTo(leftImg.end)
                    top.linkTo(parent.top)
                    end.linkTo(rightImg.start)
                    bottom.linkTo(parent.bottom)
                },
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            color = Color.Red
        )

        Image(
            modifier = Modifier
                .constrainAs(rightImg) {
                    top.linkTo(parent.top)
                    end.linkTo(parent.end)
                    bottom.linkTo(parent.bottom)
                },
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = ""
        )
    }
}

我想找出两个问题：

1. 为什么

   maxLines

   和

   overflow

   不适用于文本视图？我预计

   verylong

   文本一旦到达右侧图像就会折叠成三个点，这里有什么问题吗？

maxLines = 1,
overflow = TextOverflow.Ellipsis

结果：

2. 为什么对齐对于短文本不起作用？我的意思是根据这一行

   textAlign = TextAlign.Left

   我希望短文本出现在左侧，靠近左图像，但是我在中间有这个文本

结果：

Answer 1

您可以使用简单的

Row

将

weight(1f)

修改器应用于

Text

    Row(Modifier.fillMaxWidth()) {
        Image(
            painter = painterResource(id = R.drawable.xxx),
            contentDescription = ""
        )

        Text(
            text = "LONGTEXTLONGTEXTLONGTEXTLONGTEXTLONGTEXT",
            textAlign = TextAlign.Left,
            modifier = Modifier
                .padding(start = 8.dp).weight(1f),
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            color = Color.Red
        )

        Image(
            painter = painterResource(id = R.drawable.ic_xxx),
            contentDescription = ""
        )
    }