WPF ListView如何实现内容的垂直与水平混合排列？

核心思路是将数据源按每2个一组分组，让ListView的每个列表项承载一组内容，列表项内部用水平布局放置两个Content单元，这样整体就能呈现出你要的多行两列效果，同时保留ListView的原有特性。

Android 实现示例（Java） #

1. 数据源分组处理
   把动态加载的原始列表按每2个元素分成子列表，最后一组如果是奇数则只保留单个元素：

List<Content> originalList = ...; // 你的动态加载数据源
List<List<Content>> groupedList = new ArrayList<>();

for (int i = 0; i < originalList.size(); i += 2) {
    List<Content> group = new ArrayList<>();
    group.add(originalList.get(i));
    if (i + 1 < originalList.size()) {
        group.add(originalList.get(i + 1));
    }
    groupedList.add(group);
}

2. 自定义列表项布局
   创建包含两个Content容器的item布局（item_content_pair.xml），用LinearLayout实现水平均分：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="8dp">

    <!-- 第一个Content单元 -->
    <LinearLayout
        android:id="@+id/content_left"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:padding="4dp">

        <ImageView
            android:id="@+id/icon_left"
            android:layout_width="48dp"
            android:layout_height="48dp" />

        <TextView
            android:id="@+id/title_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/desc_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@android:color/darker_gray" />
    </LinearLayout>

    <!-- 第二个Content单元（默认隐藏，有数据时显示） -->
    <LinearLayout
        android:id="@+id/content_right"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:padding="4dp"
        android:visibility="gone">

        <ImageView
            android:id="@+id/icon_right"
            android:layout_width="48dp"
            android:layout_height="48dp" />

        <TextView
            android:id="@+id/title_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/desc_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@android:color/darker_gray" />
    </LinearLayout>
</LinearLayout>

3. 自定义Adapter填充数据
   在Adapter的getView方法中，根据分组数据填充左右两个Content单元，处理奇数项的显示逻辑：

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder;
    if (convertView == null) {
        convertView = LayoutInflater.from(mContext).inflate(R.layout.item_content_pair, parent, false);
        holder = new ViewHolder();
        holder.contentLeft = convertView.findViewById(R.id.content_left);
        holder.iconLeft = convertView.findViewById(R.id.icon_left);
        holder.titleLeft = convertView.findViewById(R.id.title_left);
        holder.descLeft = convertView.findViewById(R.id.desc_left);
        holder.contentRight = convertView.findViewById(R.id.content_right);
        holder.iconRight = convertView.findViewById(R.id.icon_right);
        holder.titleRight = convertView.findViewById(R.id.title_right);
        holder.descRight = convertView.findViewById(R.id.desc_right);
        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }

    List<Content> currentGroup = groupedList.get(position);
    // 填充左侧Content
    Content leftContent = currentGroup.get(0);
    holder.iconLeft.setImageResource(leftContent.getIconResId());
    holder.titleLeft.setText(leftContent.getTitle());
    holder.descLeft.setText(leftContent.getDescription());

    // 填充右侧Content（存在时显示）
    if (currentGroup.size() > 1) {
        holder.contentRight.setVisibility(View.VISIBLE);
        Content rightContent = currentGroup.get(1);
        holder.iconRight.setImageResource(rightContent.getIconResId());
        holder.titleRight.setText(rightContent.getTitle());
        holder.descRight.setText(rightContent.getDescription());
    } else {
        holder.contentRight.setVisibility(View.GONE);
    }

    return convertView;
}

static class ViewHolder {
    LinearLayout contentLeft, contentRight;
    ImageView iconLeft, iconRight;
    TextView titleLeft, titleRight, descLeft, descRight;
}

Flutter 实现示例 #

1. 数据源分组处理
   同样先对动态加载的原始列表进行分组：

List<Content> originalList = []; // 动态加载的数据源
List<List<Content>> groupedList = [];

for (int i = 0; i < originalList.length; i += 2) {
  List<Content> group = [];
  group.add(originalList[i]);
  if (i + 1 < originalList.length) {
    group.add(originalList[i + 1]);
  }
  groupedList.add(group);
}

2. ListView构建与内容填充
   用ListView.builder生成列表，每个列表项是一个Row，包含两个Expanded的Content单元：

ListView.builder(
  padding: EdgeInsets.all(8),
  itemCount: groupedList.length,
  itemBuilder: (context, index) {
    final group = groupedList[index];
    return Row(
      children: [
        // 左侧Content单元
        Expanded(
          child: _buildContentCard(group[0]),
        ),
        // 右侧Content单元（存在时显示）
        if (group.length > 1)
          Expanded(
            child: _buildContentCard(group[1]),
          ),
      ],
    );
  },
)

// 单独封装Content单元的构建方法
Widget _buildContentCard(Content content) {
  return Padding(
    padding: EdgeInsets.symmetric(horizontal: 4, vertical: 8),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Image.asset(content.iconAssetPath, width: 48, height: 48),
        SizedBox(height: 4),
        Text(
          content.title,
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 2),
        Text(
          content.description,
          style: TextStyle(fontSize: 14, color: Colors.grey[600]),
        ),
      ],
    ),
  );
}

注意事项 #

• 动态加载新数据后，需要重新执行分组逻辑，并触发ListView刷新（Android调用notifyDataSetChanged()，Flutter调用setState()或使用对应状态管理工具）
• 如果需要适配不同屏幕宽度调整列数，可以根据屏幕尺寸动态修改分组的元素数量
• 务必处理最后一组仅含单个元素的情况，避免数组越界异常

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