如何使用Jetpack Compose实现垂直李克特量表

核心思路 #

每个选项项采用Box嵌套Row的布局：

• 外层Box承载超出选项栏的竖线，通过Modifier.offset让竖线上下超出选项栏范围
• 内层Row实现选项栏的文本与背景，配合状态切换样式

完整代码示例 #

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// 定义李克特量表选项数据
data class LikertOption(
    val text: String,
    val value: Int
)

@Composable
fun VerticalLikertScale() {
    val options = listOf(
        LikertOption("非常不满意", 1),
        LikertOption("不满意", 2),
        LikertOption("一般", 3),
        LikertOption("满意", 4),
        LikertOption("非常满意", 5)
    )

    var selectedValue by remember { mutableStateOf<Int?>(null) }

    LazyColumn(
        modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(options.size) { index ->
            val option = options[index]
            val isSelected = selectedValue == option.value

            Box(
                modifier = Modifier.fillMaxWidth(),
                contentAlignment = Alignment.CenterStart
            ) {
                // 超出边界的竖线
                Box(
                    modifier = Modifier
                        .width(4.dp)
                        .height(48.dp) // 高度比选项栏高8dp（上下各多4dp）
                        .offset(y = (-4).dp)
                        .background(
                            color = if (isSelected) Color(0xFF2196F3) else Color(0xFFE0E0E0),
                            shape = RoundedCornerShape(2.dp)
                        )
                )

                // 选项栏主体
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(40.dp)
                        .padding(start = 12.dp)
                        .clip(RoundedCornerShape(8.dp))
                        .background(
                            color = if (isSelected) Color(0xFFE3F2FD) else Color(0xFFF5F5F5)
                        )
                        .clickable { selectedValue = option.value }
                        .padding(horizontal = 16.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        text = option.text,
                        color = if (isSelected) Color(0xFF1976D2) else Color(0xFF424242)
                    )
                }
            }
        }
    }
}

代码说明 #

• 竖线超出效果：通过Modifier.offset(y = (-4).dp)让竖线向上偏移4dp，同时设置竖线高度为48dp（选项栏高度40dp），实现上下各超出4dp的效果
• 状态切换：用selectedValue记录选中的选项值，动态切换竖线、选项栏的颜色
• 布局间距：通过LazyColumn的spacedBy控制选项之间的垂直间距，保证视觉舒适度
• 可定制性：可根据需求调整竖线宽度、颜色、超出距离，以及选项栏的圆角、背景色等参数

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