如何无需itemBuilder及手动维护数组实现ListView.separated？

当然有办法实现你想要的效果！你核心需求是像普通ListView那样直接传入children元素列表，同时自动处理分隔符和itemCount，不用手动修改数字。这里有两种实用的方案：

方案一：封装自定义可复用组件 #

如果需要在多个地方使用这种“直接传children”的分隔列表，最好封装一个自定义Widget，后续复用会非常方便：

class SeparatedListView extends StatelessWidget {
  // 接收要展示的子元素列表
  final List<Widget> children;
  // 接收分隔符组件
  final Widget separator;

  const SeparatedListView({
    super.key,
    required this.children,
    required this.separator,
  });

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      // 自动用children的长度作为itemCount，不用手动修改
      itemCount: children.length,
      separatorBuilder: (context, index) {
        // 最后一个元素后面不需要显示分隔符
        if (index == children.length - 1) {
          return const SizedBox.shrink();
        }
        return separator;
      },
      // 直接返回对应索引的子元素
      itemBuilder: (context, index) => children[index],
    );
  }
}

使用方式 #

调用时就像普通ListView一样直接传children，完全不用管itemCount：

SeparatedListView(
  separator: const Divider(height: 1.0),
  children: [
    ListTile(title: Text('Group Name')),
    ListTile(title: Text('Leave Group')),
    ListTile(title: Text('Invite Member')),
  ],
)

方案二：在build方法中临时定义子元素列表 #

如果只是在单个地方使用，不需要复用，直接在build里定义一个临时变量存储子元素列表，然后用它的长度作为itemCount即可，不用把数组存在类的字段里：

@override
Widget build(BuildContext context) {
  // 临时定义子元素列表，仅在build方法内有效
  final listItems = [
    ListTile(title: Text('Group Name')),
    ListTile(title: Text('Leave Group')),
    ListTile(title: Text('Invite Member')),
  ];

  return ListView.separated(
    // 自动获取列表长度，不用手动写数字
    itemCount: listItems.length,
    separatorBuilder: (context, index) => const Divider(height: 1.0),
    itemBuilder: (context, index) => listItems[index],
  );
}

为什么这个方案可行？ #

临时变量listItems是在build方法里创建的，不会占用类的字段空间，同时我们可以直接通过listItems.length自动获取itemCount，后续增删子元素时完全不用手动修改数字，避免了手动维护count的出错风险。

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