如何实现类似RedBus的巴士座位预订布局（GridView适配问题）

嘿，我懂你想复刻RedBus那种巴士座位布局的需求，普通GridView确实没法精准控制不同座位间的间距和最后一行的座位数，给你几个实用的实现思路：

方案一：Android平台用RecyclerView + 自定义间距装饰器 #

GridView的间距是全局统一的，没法单独调整某几个座位的间距，换成RecyclerView搭配GridLayoutManager会灵活很多，核心思路是用ItemDecoration给不同位置的座位设置差异化间距，同时单独处理最后一行的5个座位：

1. 自定义座位间距装饰器 #

创建一个SeatSpacingDecoration类，根据座位的位置动态设置左右间距：

class SeatSpacingDecoration(
    private val normalSpacing: Int, // Seat1-2、Seat3-4的间距
    private val largeSpacing: Int   // Seat2-3的大间距
) : RecyclerView.ItemDecoration() {

    override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        val position = parent.getChildAdapterPosition(view)
        val totalSeats = parent.adapter?.itemCount ?: 0
        val lastRowStartIndex = totalSeats - 5 // 最后一行从这个索引开始

        // 处理最后一行：所有座位用统一的normal间距
        if (position >= lastRowStartIndex) {
            outRect.left = if (position != lastRowStartIndex) normalSpacing else 0
            outRect.right = if (position != totalSeats - 1) normalSpacing else 0
            return
        }

        // 处理前面的行：每行4个座位，按位置设置不同间距
        val positionInRow = position % 4
        when (positionInRow) {
            0 -> { // Seat1：左边无间距，右边normal间距
                outRect.left = 0
                outRect.right = normalSpacing
            }
            1 -> { // Seat2：左边normal间距，右边large间距
                outRect.left = normalSpacing
                outRect.right = largeSpacing
            }
            2 -> { // Seat3：左边large间距，右边normal间距
                outRect.left = largeSpacing
                outRect.right = normalSpacing
            }
            3 -> { // Seat4：左边normal间距，右边无间距
                outRect.left = normalSpacing
                outRect.right = 0
            }
        }
    }
}

2. 配置RecyclerView #

在Activity/Fragment里设置布局管理器和装饰器，注意前面每行4个座位，最后一行单独适配5个：

val seatRecyclerView = findViewById<RecyclerView>(R.id.seat_recycler_view)
val seatList = mutableListOf<Seat>() // 你的座位数据，最后5个是最后一行的座位

// 设置布局管理器：前面的行每行4个，最后一行自动适配5个
val layoutManager = GridLayoutManager(this, if (seatList.size <= 5) 5 else 4)
seatRecyclerView.layoutManager = layoutManager

// 添加自定义间距装饰器
val normalSpacing = resources.getDimensionPixelSize(R.dimen.normal_seat_spacing)
val largeSpacing = resources.getDimensionPixelSize(R.dimen.large_seat_spacing)
seatRecyclerView.addItemDecoration(SeatSpacingDecoration(normalSpacing, largeSpacing))

// 设置适配器
seatRecyclerView.adapter = SeatAdapter(seatList)

方案二：Flutter平台用分块布局 + 动态Padding #

Flutter的GridView同样难搞差异化间距，推荐把座位列表分成两部分：前面的行（每行4个）和最后一行（5个），分别用不同的布局组件实现，同时给每个座位设置动态Padding：

1. 拆分座位数据 #

先把座位列表拆成前面的行数据和最后一行数据：

List<Seat> seatList = []; // 你的完整座位数据
List<Seat> frontRows = seatList.sublist(0, seatList.length - 5);
List<Seat> lastRow = seatList.sublist(seatList.length - 5);

2. 构建布局 #

用Column组合前面的GridView和最后一行的Row/GridView：

Column(
  children: [
    // 前面的行：每行4个座位，设置动态Padding
    GridView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        childAspectRatio: 1.0, // 根据你的座位样式调整比例
      ),
      itemCount: frontRows.length,
      itemBuilder: (context, index) {
        EdgeInsets padding;
        final positionInRow = index % 4;
        switch (positionInRow) {
          case 0:
            padding = EdgeInsets.only(right: 8.0); // normal间距
            break;
          case 1:
            padding = EdgeInsets.only(left: 8.0, right: 24.0); // 大间距
            break;
          case 2:
            padding = EdgeInsets.only(left: 24.0, right: 8.0); // 大间距
            break;
          case 3:
            padding = EdgeInsets.only(left: 8.0); // normal间距
            break;
          default:
            padding = EdgeInsets.zero;
        }
        return Padding(
          padding: padding,
          child: SeatWidget(seat: frontRows[index]),
        );
      },
    ),
    // 最后一行：5个座位，统一间距
    SizedBox(height: 16.0), // 行之间的间距
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: lastRow.map((seat) {
        return Expanded(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 4.0),
            child: SeatWidget(seat: seat),
          ),
        );
      }).toList(),
    ),
  ],
)

关键注意点 #

• 不管用哪种平台，都要确保座位数据的最后5个是最后一行的座位，方便布局逻辑识别
• 间距数值可以根据你的UI设计稿调整，确保视觉效果和RedBus一致
• 如果需要支持不同屏幕尺寸，建议用dp（Android）或逻辑像素（Flutter）来定义间距，避免适配问题

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