如何让LazyRow首尾项固定不滚动，仅中间区域可横向滚动？

直接用Row嵌套LazyRow的方案可以解决你的问题，不需要预先定义项的宽度，同时能处理列表长度不足3的边界情况：

核心布局思路 #

• 左侧直接放置列表的第一个数字（固定显示）
• 中间用LazyRow承载从第二个到倒数第二个的数字，通过weight(1f)让它占满左右固定项之间的剩余空间，实现滚动
• 右侧直接放置列表的最后一个数字（固定显示）

完整代码示例 #

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.weight
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun FixedEndsScrollableMiddleList(numbers: List<String>) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 左侧固定首项（黑边框）
        Text(
            text = numbers.first(),
            modifier = Modifier
                .padding(horizontal = 8.dp)
                .border(1.dp, Color.Black)
                .padding(4.dp),
            style = TextStyle(fontSize = 16.sp)
        )

        // 处理不同列表长度的情况
        when {
            numbers.size > 2 -> {
                // 中间可滚动区域（灰边框项）
                LazyRow(
                    modifier = Modifier.weight(1f),
                    horizontalArrangement = Arrangement.spacedBy(8.dp),
                    contentPadding = PaddingValues(horizontal = 8.dp)
                ) {
                    items(numbers.subList(1, numbers.lastIndex)) { number ->
                        Text(
                            text = number,
                            modifier = Modifier
                                .border(1.dp, Color.Gray)
                                .padding(4.dp),
                            style = TextStyle(fontSize = 16.sp)
                        )
                    }
                }
            }
            numbers.size == 2 -> {
                // 仅两个元素时，用Spacer填充中间空间，让右侧项贴紧屏幕右边缘
                Spacer(modifier = Modifier.weight(1f))
            }
        }

        // 右侧固定尾项（黑边框）
        Text(
            text = numbers.last(),
            modifier = Modifier
                .padding(horizontal = 8.dp)
                .border(1.dp, Color.Black)
                .padding(4.dp),
            style = TextStyle(fontSize = 16.sp)
        )
    }
}

方案优势 #

1. 自适应宽度：所有数字项的宽度由内容自动计算，无需预先定义
2. 边界处理：针对列表长度为1、2、大于2的情况都做了适配，避免异常显示
3. 滚动流畅：中间区域用LazyRow承载大量数据，保证滚动性能

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