Flutter实现图片列表拆分至两列圆形头像（无重复+适配长度）

需求说明 #

需将现有图片列表分配至两列圆形头像组件中，一列容纳半数图片，另一列容纳剩余图片，要求不重复展示图片、适配列表长度，同时保留原有滚动UI样式。

修改后的完整代码 #

import 'package:flutter/material.dart';

class AddUserPage extends StatefulWidget {
  const AddUserPage({Key? key}) : super(key: key);

  @override
  State<AddUserPage> createState() => _AddUserPageState();
}

class _AddUserPageState extends State<AddUserPage> {
  final List<String> profiles = [
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-05_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-04_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-01_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-02_orig.png',
    'http://www.the-able-company.com/uploads/3/2/0/9/32099781/5kids-03_orig.png'
  ];

  @override
  Widget build(BuildContext context) {
    // 分割列表：左列取半数（奇数长度时多一个），右列取剩余
    final midIndex = (profiles.length + 1) ~/ 2;
    final leftProfiles = profiles.sublist(0, midIndex);
    final rightProfiles = profiles.sublist(midIndex);
    // 取最长列表的长度作为滚动项数量，确保所有图片都能展示
    final itemCount = leftProfiles.length > rightProfiles.length 
        ? leftProfiles.length 
        : rightProfiles.length;

    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              height: 250,
              child: ListWheelScrollView.useDelegate(
                squeeze: 1.4,
                itemExtent: 150,
                diameterRatio: 9,
                onSelectedItemChanged: (value) {},
                physics: const FixedExtentScrollPhysics(),
                childDelegate: ListWheelChildBuilderDelegate(
                  childCount: itemCount,
                  builder: (context, index) => Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      // 左列头像：存在则显示，否则显示占位
                      index < leftProfiles.length
                          ? CircleAvatar(
                              radius: 50,
                              backgroundImage: NetworkImage(leftProfiles[index]),
                            )
                          : const CircleAvatar(
                              radius: 50,
                              backgroundColor: Colors.grey,
                              child: Icon(Icons.person),
                            ),
                      // 右列头像：存在则显示，否则显示占位
                      index < rightProfiles.length
                          ? CircleAvatar(
                              radius: 50,
                              backgroundImage: NetworkImage(rightProfiles[index]),
                            )
                          : const CircleAvatar(
                              radius: 50,
                              backgroundColor: Colors.grey,
                              child: Icon(Icons.person),
                            ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• 列表分割逻辑：通过midIndex = (profiles.length + 1) ~/ 2计算分割点，奇数长度时左列多容纳一个图片，保证两列数量尽可能均衡。
• 适配滚动项数量：取左右列表中较长的长度作为滚动项总数，确保所有图片都能在滚动中展示。
• 修复图片加载错误：原代码使用AssetImage加载网络链接，替换为NetworkImage才能正确加载网络图片。
• 占位处理：当某列没有对应索引的图片时，显示带默认图标的灰色圆形头像，保持UI一致性。

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