如何在listview.builder完成列表视图构建之前显示进度指示器

在Flutter中，ListView.builder 是一个常用的构造函数，用于高效地构建列表。当数据量较大时，列表的构建可能需要一些时间，这时在列表视图构建完成之前显示一个进度指示器是一个很好的用户体验实践。

以下是如何在 ListView.builder 完成列表视图构建之前显示进度指示器的步骤：

基础概念

ListView.builder: 一个Flutter小部件，它构建一个列表视图。与 ListView 不同，ListView.builder 只会构建屏幕上可见的部分，这对于性能优化非常有帮助。
进度指示器: 通常是一个旋转的圆圈或其他视觉元素，用来告知用户应用正在加载数据。

实现步骤

创建状态管理: 使用 StatefulWidget 和 setState 来管理加载状态。
显示进度指示器: 当数据尚未加载完成时，显示进度指示器。
加载数据: 在后台加载数据，并在数据加载完成后更新UI。

示例代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListView with Progress Indicator')),
        body: MyListView(),
      ),
    );
  }
}

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  bool _isLoading = true;
  List<String> _items = [];

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  void _loadData() async {
    // Simulate a delay
    await Future.delayed(Duration(seconds: 3));
    setState(() {
      _isLoading = false;
      _items = List<String>.generate(20, (i) => 'Item $i');
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return Center(child: CircularProgressIndicator());
    } else {
      return ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(_items[index]));
        },
      );
    }
  }
}