Android Jetpack Compose Row元素定位问题：长文本导致图标被遮挡

嘿，我来帮你搞定这个问题～你现在的困扰是文本过长时，左边的圆形图标直接被挤得看不见了对吧？这是因为你给内部的Row加了weight(1f)，但里面的Text没有任何空间限制，它会玩命占满整个Row的宽度，直接把Icon挤出去了。

要解决这个问题，核心就是让文本只占据Icon之外的剩余空间，同时保证Icon始终能显示出来。这里有两种常用方案，你可以根据自己的需求选：

方案一：文本单行显示，超出部分用省略号 #

适合需要保持一行布局的场景，文本过长时自动截断并显示省略号，圆形图标会一直紧跟在文本后面：

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically // 加上垂直居中，整体布局更协调
) {
    Row(
        modifier = Modifier.weight(1f),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = text,
            modifier = Modifier
                .weight(1f) // 让文本占据内部Row除了Icon之外的所有空间
                .align(Alignment.CenterVertically),
            maxLines = 1, // 限制文本只显示一行
            overflow = TextOverflow.Ellipsis // 超出部分显示省略号
        )
        Icon(
            modifier = Modifier
                .padding(start = 12.dp)
                .align(Alignment.CenterVertically),
            painter = painterResource(R.drawable.ic_circle),
            contentDescription = "圆形图标" // 尽量不要留空，方便无障碍访问
        )
    }
    Box(
        modifier = Modifier
            .size(26.dp)
            .align(Alignment.CenterVertically),
    ) {
        Image(
            modifier = Modifier.align(Alignment.Center),
            painter = painterResource(R.drawable.ic_square),
            contentDescription = "方形图标",
        )
    }
}

方案二：文本允许换行，图标始终在文本右侧 #

如果你的场景允许文本换行，只需要去掉maxLines=1，同样给Text加上weight(1f)，这样文本会自动换行，圆形图标会一直贴在文本的右侧（如果文本换行，图标会和文本的最后一行对齐）：

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.Top // 保持顶部对齐的话可以用这个
) {
    Row(
        modifier = Modifier.weight(1f),
        verticalAlignment = Alignment.Top,
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = text,
            modifier = Modifier
                .weight(1f) // 让文本占据剩余空间
                .align(Alignment.Top),
            overflow = TextOverflow.Ellipsis // 可选，多行也可以加省略号
        )
        Icon(
            modifier = Modifier
                .padding(start = 12.dp)
                .align(Alignment.Top),
            painter = painterResource(R.drawable.ic_circle),
            contentDescription = "圆形图标"
        )
    }
    Box(
        modifier = Modifier
            .size(26.dp)
            .align(Alignment.Top),
    ) {
        Image(
            modifier = Modifier.align(Alignment.Center),
            painter = painterResource(R.drawable.ic_square),
            contentDescription = "方形图标",
        )
    }
}

简单来说就是给Text加上weight(1f)，让它在内部Row里只能用剩下的空间，这样不管文本多长，圆形图标都不会被挤没啦～

备注：内容来源于stack exchange，提问作者testivanivan