Jetpack Compose中如何实现单选按钮上方文本自动换行

当前实现的横向问卷布局包含4个RadioButton，短文本显示正常，但当RadioButton上方的文本过长时，会挤压其他控件并导致内容超出屏幕，需要实现文本自动换行同时保证布局稳定。

问题根源 #

原代码中每个选项的Column未设置宽度分配规则，长文本会无限扩展宽度，导致Row布局水平溢出。

解决方法 #

• 为每个选项的Column添加weight(1f)，让所有选项平均分配Row的可用宽度
• 给上方的Text设置宽度填充和自动换行属性，确保文本在分配的宽度内换行显示

修改后的完整代码 #

package com.example.jetquestionnaire.ui.theme

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectable
import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp

@Composable
fun RadioButtonTest() {
    val options = listOf("3", "2", "1", "0")
    var selectedOption by remember { mutableStateOf(options[0]) }
    val textAboveRadioButtons = listOf(
        "This is a very long text that needs to wrap automatically",
        "Medium-High",
        "Medium-Low",
        "Low",
    )
    //custom colour
    val customSelectedColor = Color(0xFF5799FC)
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        options.zip(textAboveRadioButtons).forEach { (option, textAbove) ->
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier
                    .weight(1f) // 关键：让每个Column平分Row宽度
                    .selectable(
                        selected = (selectedOption == option),
                        onClick = { selectedOption = option }
                    )
                    .padding(8.dp),
            ) {
                Text(
                    text = textAbove,
                    modifier = Modifier
                        .padding(bottom = 5.dp)
                        .fillMaxWidth(), // 占满Column分配的宽度
                    textAlign = TextAlign.Center, // 文本居中对齐
                    softWrap = true // 允许自动换行
                )
                RadioButton(
                    selected = (selectedOption == option),
                    onClick = { selectedOption = option },
                    colors = RadioButtonDefaults.colors(
                        selectedColor = customSelectedColor,
                        unselectedColor = Color.Gray
                    ),
                )
                Text(
                    text = option,
                    modifier = Modifier.padding(top = 5.dp),
                )
            }
        }
    }
}

关键修改说明 #

1. Row布局优化：将fillMaxSize()改为fillMaxWidth()，仅占用水平方向可用宽度，避免垂直方向不必要的拉伸（若需全屏显示可保留fillMaxSize()，不影响核心逻辑）
2. Column宽度分配：添加weight(1f)，确保四个选项平分Row宽度，不会因单个长文本抢占空间
3. Text换行配置：
   • fillMaxWidth()让文本占满所在Column的分配宽度
   • textAlign = TextAlign.Center保证换行后的文本依然居中
   • softWrap = true显式开启自动换行（默认值为true，显式声明更清晰）

修改后，无论文本多长，都会在各自的Column宽度内自动换行，布局始终保持稳定的横向分布。

内容的提问来源于stack exchange，提问作者Armand Surbakti