android 如果在撰写时溢出,则在右侧显示图标并省略中间文本

olmpazwi  于 2022-12-21  发布在  Android
关注(0)|答案(2)|浏览(135)

我要两种行为。
1.[工作]如果中间文本较短,则心形图标应位于中间文本旁边,购物车应位于末尾,见图。

1.[不工作]如果中间文本较大,则心形图标应贴在推车左侧,中间文本为省略号。

注意:我已经尝试了Modifier.weight(1f,fill = false)的第二个行为,但后来第一次打破。

代码

Row(
            modifier = Modifier.fillMaxSize()
        ) {
            Row(
                modifier = Modifier.wrapContentWidth()
            ) {
                Icon(Icons.Filled.Search,"")

                Spacer(modifier = Modifier.width(18.dp))

                Icon(Icons.Filled.Add,"")

                Spacer(modifier = Modifier.width(12.dp))

                Text(
                    text = "If text is long, then cart icon show at end with ellipsis text",
                    maxLines = 1,
                    modifier = Modifier
                        .weight(1f,fill = false)
                )
                Spacer(modifier = Modifier.width(12.dp))

                Icon(Icons.Filled.Favorite,"")
            }

            Row(Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.End) {
                Icon(Icons.Filled.ShoppingCart,"")
            }
        }
nuypyhwy

nuypyhwy1#

您可以使用Row Package Text和收藏Icon,并对其应用weight修改器以填充可用空间。
然后将weight(1f, fill = false)赋值给Text

Row(
        modifier = Modifier.fillMaxWidth().background(Color.Yellow),
    ) {
        Icon(Icons.Filled.Search,"")
        Spacer(modifier = Modifier.width(18.dp))
        Icon(Icons.Filled.Add,"")

        Row(Modifier.weight(1f)) {
            Text(
                text = "If text is",
                maxLines = 1,
                modifier = Modifier
                    .weight(1f, fill = false)
                    .padding(8.dp),
                overflow = TextOverflow . Ellipsis
            )
            Icon(
                Icons.Filled.Favorite, "",
            )
        }

        Icon(Icons.Filled.ShoppingCart,"")
    }

tjvv9vkg

tjvv9vkg2#

你的中心组件应该使用“左空间”与重量属性

modifier = Modifier
        .weight(1f)
        .padding(8.dp),
    overflow = TextOverflow.Ellipsis

相关问题