Flutter ListView列表更新异常：滚动至末尾操作后缺失首项

我看了你遇到的问题：滚动到ListView末尾后执行更新操作（删除项、页面跳转返回等），更新后的列表无法显示开头部分。这其实是当前列表实现方式和滚动位置管理导致的问题，下面给你详细分析和解决办法：

问题根源 #

1. 非懒加载ListView的滚动位置未重置：你现在用ListView(children: buildListCategories(...))的方式，会一次性渲染所有列表项。当你滚动到底部后更新数据，列表的滚动偏移量不会自动重置，即使数据减少了，视图还是停留在原来的底部位置，自然看不到开头。
2. build方法内定义函数的冗余：把buildListCategories放在build方法里，每次组件重建都会重新创建这个函数，虽然不影响功能，但不符合Flutter的最佳实践。
3. initState里不必要的setState：initState是组件初始化的生命周期，此时还没构建UI，直接给listaDB赋值就行，不需要调用setState。

最佳解决方案：改用ListView.builder #

ListView.builder是懒加载的列表组件，只会渲染当前视口内的项，不仅性能更好，而且在数据更新后能更合理地处理滚动位置。另外我们还可以优化代码结构，修复其他小问题：

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CategoriaPage(),
    );
  }
}

class CategoriaPage extends StatefulWidget {
  const CategoriaPage({super.key});

  @override
  CategoriaPageState createState() => CategoriaPageState();
}

class CategoriaPageState extends State<CategoriaPage> {
  final Color azulAppbar = const Color(0xFF26C6DA);
  List listaDB = [];
  // 可选：手动控制滚动位置的控制器
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    // 初始化数据，无需setState
    listaDB = [
      [{'category': 'foo01', 'id': 1}],
      [{'category': 'foo02', 'id': 2}],
      [{'category': 'foo03', 'id': 3}],
      [{'category': 'foo04', 'id': 4}],
      [{'category': 'foo05', 'id': 5}],
      [{'category': 'foo06', 'id': 6}],
      [{'category': 'foo07', 'id': 7}],
      [{'category': 'foo08', 'id': 8}],
      [{'category': 'foo09', 'id': 9}],
      [{'category': 'foo10', 'id': 10}],
      [{'category': 'foo11', 'id': 11}],
      [{'category': 'foo12', 'id': 12}],
      [{'category': 'foo13', 'id': 13}],
      [{'category': 'foo14', 'id': 14}],
      [{'category': 'foo15', 'id': 15}],
      [{'category': 'foo16', 'id': 16}],
      [{'category': 'foo17', 'id': 17}],
      [{'category': 'foo18', 'id': 18}],
      [{'category': 'foo19', 'id': 19}],
      [{'category': 'foo20', 'id': 20}],
      [{'category': 'foo21', 'id': 21}],
      [{'category': 'foo22', 'id': 22}],
      [{'category': 'foo23', 'id': 23}],
      [{'category': 'foo24', 'id': 24}]
    ];
  }

  // 把构建列表项的方法移到build外部，符合规范
  Widget _buildItemCategory(int index) {
    final item = listaDB[index][0];
    final id = item['id'];
    final category = item['category'];
    return ItemCategory(
      key: ObjectKey(item),
      id: id,
      category: category,
      onPressed: () {
        setState(() {
          listaDB = [
            [{'category': 'foo01', 'id': 1}],
            [{'category': 'foo02', 'id': 2}],
            [{'category': 'foo03', 'id': 3}],
            [{'category': 'foo04', 'id': 4}],
            [{'category': 'foo05', 'id': 5}],
            [{'category': 'foo06', 'id': 6}],
            [{'category': 'foo07', 'id': 7}],
            [{'category': 'foo08', 'id': 8}],
            [{'category': 'foo09', 'id': 9}],
            [{'category': 'foo10', 'id': 10}],
            [{'category': 'foo11', 'id': 11}],
            [{'category': 'foo12', 'id': 12}],
            [{'category': 'foo13', 'id': 13}],
            [{'category': 'foo14', 'id': 14}],
            [{'category': 'foo15', 'id': 15}],
            [{'category': 'foo16', 'id': 16}],
            [{'category': 'foo17', 'id': 17}],
            [{'category': 'foo18', 'id': 18}],
            [{'category': 'foo19', 'id': 19}],
            [{'category': 'foo20', 'id': 20}],
            [{'category': 'foo22', 'id': 22}],
            [{'category': 'foo23', 'id': 23}],
            [{'category': 'foo24', 'id': 24}]
          ];
          // 更新后自动回到列表顶部
          _scrollController.jumpTo(0);
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Categorias'),
        backgroundColor: azulAppbar,
      ),
      body: ListView.builder(
        controller: _scrollController,
        padding: const EdgeInsets.only(top: 8.0),
        itemCount: listaDB.length,
        itemBuilder: (context, index) => _buildItemCategory(index),
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose(); // 释放控制器，避免内存泄漏
    super.dispose();
  }
}

class ItemCategory extends StatefulWidget {
  final int id;
  final String category;
  final VoidCallback onPressed;

  const ItemCategory({
    super.key,
    required this.id,
    required this.category,
    required this.onPressed,
  });

  @override
  ItemCategoryState createState() => ItemCategoryState();
}

class ItemCategoryState extends State<ItemCategory> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  double? flingOpening;
  bool startFling = true;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 246),
      vsync: this,
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: const Interval(0.0, 1.0, curve: Curves.linear),
    );
  }

  void _move(DragUpdateDetails details) {
    final double delta = details.primaryDelta! / 304;
    _controller.value -= delta;
  }

  void _settle(DragEndDetails details) {
    if (startFling) {
      _controller.fling(velocity: 1.0);
      startFling = false;
    } else {
      _controller.fling(velocity: -1.0);
      startFling = true;
    }
  }

  @override
  Widget build(BuildContext context) {
    final ui.Size logicalSize = MediaQuery.of(context).size;
    final double _width = logicalSize.width;
    flingOpening = -(48.0 / _width);

    return GestureDetector(
      onHorizontalDragUpdate: _move,
      onHorizontalDragEnd: _settle,
      child: Stack(
        children: <Widget>[
          Positioned.fill(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Container(
                  decoration: const BoxDecoration(
                    color: Color(0xFFE57373),
                  ),
                  child: IconButton(
                    icon: const Icon(Icons.delete),
                    color: Colors.white,
                    onPressed: widget.onPressed,
                  ),
                ),
              ],
            ),
          ),
          SlideTransition(
            position: Tween<Offset>(
              begin: Offset.zero,
              end: Offset(flingOpening!, 0.0),
            ).animate(_animation),
            child: Container(
              decoration: const BoxDecoration(
                border: Border(
                  top: BorderSide(style: BorderStyle.solid, color: Colors.black26),
                ),
                color: Colors.white,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                          margin: const EdgeInsets.only(left: 16.0),
                          padding: const EdgeInsets.only(right: 40.0, top: 4.5, bottom: 4.5),
                          child: Row(
                            children: <Widget>[
                              Container(
                                margin: const EdgeInsets.only(right: 16.0),
                                child: const Icon(
                                  Icons.brightness_1,
                                  color: Colors.black,
                                  size: 35.0,
                                ),
                              ),
                              Text(widget.category),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose(); // 释放动画控制器
    super.dispose();
  }
}

关键修改点说明 #

1. 替换为ListView.builder：懒加载渲染，提升性能，同时框架会更好地处理数据更新后的列表视图。
2. 添加ScrollController：如果需要在数据更新后自动滚动到顶部，调用_scrollController.jumpTo(0)即可；如果不需要自动滚动，也可以保留控制器方便后续扩展。
3. 优化代码结构：把构建列表项的方法移到build方法外，符合Flutter代码规范。
4. 移除不必要的setState：initState里直接初始化数据，不需要调用setState。
5. 添加dispose方法：释放ScrollController和AnimationController，避免内存泄漏。
6. 使用const关键字：对不变的Widget和值添加const，提升性能。

备选方案：保留原ListView方式并重置滚动位置 #

如果你不想改用ListView.builder，可以给原来的ListView添加ScrollController，在setState更新数据后调用_scrollController.jumpTo(0)来回到列表顶部，这样就能看到开头的项了。不过这种方式在列表项较多时性能不如ListView.builder，还是推荐用第一种方案。

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