Flutter中含可变与固定项的ListView最佳实践方案问询

原有实现的问题分析 #

• 代码存在低级错误：lenght拼写应为length，index判断逻辑错误（原代码index < (varItems.length-1)会漏掉最后一个可变元素）
• 每次build都会调用getFixedItems()重复创建Widget，造成不必要的性能消耗
• 扩展性极差：当可变元素位置变更（如下方、混合分布）时，需要大幅修改index判断逻辑，维护成本高

方案一：使用CustomScrollView + SliverList（官方推荐） #

这是Flutter官方主推的组合不同滚动内容的方案，支持任意顺序排列可变/固定列表区块，同时保持懒加载特性，性能最优。

class SomeViewState extends State<SomeView> {
  final List<String> varItems = ['A', 'B', 'C'];

  // 固定元素封装为Sliver组件
  Widget getFixedSliver() {
    return SliverList(
      delegate: SliverChildListDelegate([
        const ListTile(title: Text('固定项1')),
        const ListTile(title: Text('固定项2')),
        const Divider(),
        const SwitchListTile(title: Text('开关项'), value: false, onChanged: null),
      ]),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        // 可变元素在上，固定元素在下
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => ListTile(title: Text(varItems[index])),
            childCount: varItems.length,
          ),
        ),
        getFixedSliver(),

        // 若需可变元素在下，只需调换顺序：
        // getFixedSliver(),
        // SliverList(...)
      ],
    );
  }
}

方案二：封装通用Section列表生成器 #

如果需要更灵活的混合分布（比如固定项-可变项-固定项），可以抽象出Section概念，统一管理不同类型的列表区块，后续调整顺序只需修改Section配置即可。

// 定义区块类型
enum SectionType { variable, fixed }

class ListSection {
  final SectionType type;
  final List<Widget>? fixedWidgets;
  final List<String>? variableData;

  ListSection.variable(this.variableData) : type = SectionType.variable, fixedWidgets = null;
  ListSection.fixed(this.fixedWidgets) : type = SectionType.fixed, variableData = null;
}

class SomeViewState extends State<SomeView> {
  final List<String> varItems = ['A', 'B', 'C'];

  // 配置任意顺序的列表区块
  final List<ListSection> sections = [
    ListSection.fixed([
      const ListTile(title: Text('顶部固定项')),
      const Divider(),
    ]),
    ListSection.variable(['A', 'B', 'C']),
    ListSection.fixed([
      const SwitchListTile(title: Text('底部开关项'), value: false, onChanged: null),
    ]),
  ];

  // 计算总列表项数
  int get totalItemCount {
    int count = 0;
    for (var section in sections) {
      if (section.type == SectionType.variable) {
        count += section.variableData?.length ?? 0;
      } else {
        count += section.fixedWidgets?.length ?? 0;
      }
    }
    return count;
  }

  // 根据索引匹配对应区块的列表项
  Widget _buildItem(int index) {
    int currentIndex = index;
    for (var section in sections) {
      if (section.type == SectionType.variable) {
        final dataLength = section.variableData?.length ?? 0;
        if (currentIndex < dataLength) {
          return ListTile(title: Text(section.variableData![currentIndex]));
        }
        currentIndex -= dataLength;
      } else {
        final widgetLength = section.fixedWidgets?.length ?? 0;
        if (currentIndex < widgetLength) {
          return section.fixedWidgets![currentIndex];
        }
        currentIndex -= widgetLength;
      }
    }
    return const SizedBox.shrink();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: totalItemCount,
      itemBuilder: (context, index) => _buildItem(index),
    );
  }
}

方案三：Column嵌套ListView（适合固定元素较少场景） #

如果固定元素数量少且高度确定，可以用Column嵌套Expanded包裹的ListView.builder，避免滚动冲突，实现简单。

class SomeViewState extends State<SomeView> {
  final List<String> varItems = ['A', 'B', 'C'];

  Widget getFixedItems() {
    return Column(
      children: const [
        ListTile(title: Text('固定项1')),
        ListTile(title: Text('固定项2')),
        Divider(),
        SwitchListTile(title: Text('开关项'), value: false, onChanged: null),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 可变元素在上，固定元素在下
        Expanded(
          child: ListView.builder(
            itemCount: varItems.length,
            itemBuilder: (context, index) => ListTile(title: Text(varItems[index])),
          ),
        ),
        getFixedItems(),

        // 若可变元素在下，调换顺序即可
        // getFixedItems(),
        // Expanded(child: ListView.builder(...))
      ],
    );
  }
}

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