RecyclerView同一行放置不同类型ViewHolder实现方案问询

哈哈这个场景我太有共鸣了！之前做电商商品列表的时候，就碰到过类似的需求——默认的GridLayoutManager有时候会“固执地”把不同类型的Item拆成单独的行，但其实只要我们掌握它的核心逻辑，就能轻松搞定。

核心原理：用SpanSizeLookup控制Item的列跨度 #

GridLayoutManager的列数是我们初始化时设置的（比如你这里的2列），但每个Item实际占用多少列，是可以动态控制的。默认情况下，每个Item都占1列，但如果你的某个类型Item被设置成占2列，那它就会独占一行；反之，如果我们让不同类型的Item都占1列，它们自然就能凑在同一行里。

具体实现步骤 #

1. 给每个Item类型定义对应的列跨度

根据你的需求，我们可以这样设定（以2列Grid为例）：

• Type1、Type3的Item各占1列（这样两个不同类型的Item就能凑成一行）
• Type2的Item可以选择占1列（和其他类型凑行）或者2列（独占一行），完全看你的布局需求

2. 自定义SpanSizeLookup动态返回跨度

我们需要给GridLayoutManager设置一个自定义的SpanSizeLookup，重写getSpanSize方法，根据当前Item的类型返回对应的列数：

// 初始化2列的GridLayoutManager
GridLayoutManager layoutManager = new GridLayoutManager(getContext(), 2);

// 设置自定义的SpanSizeLookup
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        // 获取当前位置的Item类型
        int itemType = yourAdapter.getItemViewType(position);
        // 根据类型返回对应的列跨度
        switch (itemType) {
            case TYPE_1:
            case TYPE_3:
                return 1; // 占1列
            case TYPE_2:
                return 1; // 这里可以改成2，让Type2独占一行
            default:
                return 1;
        }
    }
});

// 给RecyclerView设置这个布局管理器
recyclerView.setLayoutManager(layoutManager);

3. 确保Adapter的getItemViewType正常工作

这是基础中的基础，你的Adapter必须正确实现getItemViewType方法，返回每个Item对应的类型，这样上面的SpanSizeLookup才能拿到正确的类型来判断跨度：

@Override
public int getItemViewType(int position) {
    YourDataModel data = mDataList.get(position);
    // 根据你的数据模型判断类型，这里只是示例
    if (data.getType() == DataType.TYPE_1) {
        return TYPE_1;
    } else if (data.getType() == DataType.TYPE_2) {
        return TYPE_2;
    } else {
        return TYPE_3;
    }
}

额外注意事项 #

• 同一行的Item跨度总和必须等于你设置的总列数（比如2列的话，1+1=2，或者2=2），否则GridLayoutManager会自动换行。
• 如果不同类型的Item高度差异较大，记得给RecyclerView设置setHasFixedSize(false)，或者在Adapter的onBindViewHolder里动态计算Item高度，避免出现布局错乱的情况。

这样调整之后，你说的item1-type1、item2-type3、item3-type2的序列，就会变成前两个Item在同一行，第三个Item和下一个Item（如果有的话）在同一行，完美实现不同类型ViewHolder在同一行的需求！

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