Jetpack Compose底部视图文本被截断问题求助

问题根源 #

小屏设备宽度有限时，Row容器内的Text没有被分配足够的可用宽度，且默认情况下Row不会自动处理文本溢出，导致过长的文本被截断。

方案1：让文本自动换行并占满剩余宽度 #

给Text添加weight(1f)修饰符，让它占据Row中除了Image之外的全部剩余宽度，同时文本会自动换行适配高度：

fun ScreenView(verticalScroll: ScrollState = rememberScrollState()){
    Column(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxSize()
            .verticalScroll(verticalScroll),
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .weight(1f),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(painter = abc, contentDescription = null )
            Text(text = "xyz")
        }
        Column {
            Spacer(modifier = Modifier.height(16.dp))
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .background(Color.Gray)
                    .padding(vertical = 10.dp, horizontal = 20.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Image(painter = abc, contentDescription = null)
                Text(
                    text = "warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage",
                    style = SlateTypography.body2,
                    modifier = Modifier.weight(1f) // 让Text占满Row剩余宽度
                )
            }
        }
    }
}

方案2：让Row支持水平滚动 #

如果希望文本保持单行展示，允许用户横向滑动查看全部内容，给Row添加horizontalScroll修饰符：

fun ScreenView(verticalScroll: ScrollState = rememberScrollState()){
    Column(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxSize()
            .verticalScroll(verticalScroll),
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .weight(1f),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(painter = abc, contentDescription = null )
            Text(text = "xyz")
        }
        Column {
            Spacer(modifier = Modifier.height(16.dp))
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .background(Color.Gray)
                    .padding(vertical = 10.dp, horizontal = 20.dp)
                    .horizontalScroll(rememberScrollState()), // 添加水平滚动支持
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Image(painter = abc, contentDescription = null)
                Text(
                    text = "warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage",
                    style = SlateTypography.body2
                )
            }
        }
    }
}

方案3：限制行数并显示省略号 #

如果不想让文本占用过多垂直空间，可以限制Text的最大行数，超出部分显示省略号：

fun ScreenView(verticalScroll: ScrollState = rememberScrollState()){
    Column(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxSize()
            .verticalScroll(verticalScroll),
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .weight(1f),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(painter = abc, contentDescription = null )
            Text(text = "xyz")
        }
        Column {
            Spacer(modifier = Modifier.height(16.dp))
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .background(Color.Gray)
                    .padding(vertical = 10.dp, horizontal = 20.dp),
                horizontalArrangement = Arrangement.spacedBy(12.dp)
            ) {
                Image(painter = abc, contentDescription = null)
                Text(
                    text = "warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage warningMessage",
                    style = SlateTypography.body2,
                    modifier = Modifier.weight(1f),
                    maxLines = 2, // 限制最大展示行数
                    overflow = TextOverflow.Ellipsis // 超出部分显示省略号
                )
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Compose Learner