Flutter 异步加载列表插件 async_list_view 的使用

异步加载列表插件 async_list_view 可以帮助你从异步数据源中懒加载一个滚动列表。async_list_view 是基于 ListView.builder 和 StreamSummaryBuilder 的轻量级封装。

由于项目项只在用户可见时才被加载，因此 async_list_view 减少了潜在的昂贵数据库读取操作。

示例用例

• 显示从 Firestore 获取的用户聊天记录。
• 显示在线市场上的搜索结果。
• 显示从大文件中读取的日志行。

任何贡献、错误报告或功能请求都受到欢迎。

完整示例

以下是一个完整的示例代码，展示了如何使用 async_list_view 插件来实现异步加载列表。

import 'package:async_list_view/async_list_view.dart';
import 'package:flutter/material.dart';
import 'mock_database.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: SafeArea(
          child: Scaffold(
            appBar: AppBar(
              title: const Text('AsyncListView demo!'),
              bottom: const TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.menu_book)),
                  Tab(icon: Icon(Icons.add)),
                ],
              ),
            ),
            body: const TabBarView(
              children: [
                LazyFruitList(),
                Center(
                  child: SelectableText(
                    'To get a fruit added to the fruit list, please file a bug '
                    'report:\n\n'
                    'https://github.com/caseycrogers/async_list_view/issues/new?assignees=caseycrogers&labels=high-priority&template=fruit-request-template.md&title=%5BFruit%5D+Add+%3Cinsert-fruit-name-here%3E+to+the+Fruit+List',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.black38,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  _LazyFruitListState createState() => _LazyFruitListState();
}

class _LazyFruitListState extends State<LazyFruitList> {
  // 当前已加载的水果数量
  int _loadedFruits = 0;

  // 满足搜索条件的水果总数
  int _totalFruits = countMatchingFruits('');

  String _searchString = '';
  late Stream<String> _fruitStream;

  List<String> initialFruits = [];

  void _initializeFruitStream() {
    _loadedFruits = 0;
    _totalFruits = countMatchingFruits(_searchString);
    _fruitStream = getFruits(_searchString).map((fruit) {
      // 增加计数，因为我们不能在 `itemBuilder` 中调用 `setState`
      // 使用 `map` 而不是 `listen`，因为 `listen` 需要广播流，而广播流不能暂停流的底层源。
      // 提示：广播流不是你的朋友。尽量避免使用它。
      setState(() {
        _loadedFruits += 1;
      });
      return fruit;
    });
  }

  [@override](/user/override)
  void initState() {
    _initializeFruitStream();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        IconButton(
          icon: const Icon(Icons.add),
          onPressed: () {
            setState(() {
              initialFruits = [
                initialFruits.length.toString(),
                ...initialFruits,
              ];
            });
          },
        ),
        TextField(
          onChanged: _onTextChanged,
          decoration: const InputDecoration(
            hintText: 'Search Fruits...',
          ),
        ),
        Expanded(
          child: AsyncListView<String>(
            // 如果相同的流重复传递给 AsyncListView，则 AsyncListView 将保持其状态并不会错误地两次监听同一个流。
            stream: _fruitStream,
            itemBuilder: _buildFruitTile,
            initialData: initialFruits,
            // 如果用户滚动到当前已加载的水果之外，则显示 'loading...' 文本，以告知他们需要等待更多结果。
            loadingWidget: const Padding(
              padding: EdgeInsets.all(8),
              child: Text(
                'loading...',
                style: TextStyle(fontSize: 20, color: Colors.black54),
              ),
            ),
            keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
            noResultsWidgetBuilder: (context) {
              return SelectableText(
                'No fruits found for search term \'$_searchString\'. '
                'If you feel a fruit has excluded in error, please file '
                'a bug report:'
                '\n\nhttps://github.com/caseycrogers/async_list_view/issues/new?assignees=caseycrogers&labels=high-priority&template=fruit-request-template.md&title=%5BFruit%5D+Add+%3Cinsert-fruit-name-here%3E+to+the+Fruit+List',
                style: const TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.black38,
                ),
                textAlign: TextAlign.center,
              );
            },
          ),
        ),
        Container(
          color: Colors.blueAccent.shade100,
          child: Center(
            child: Text(
              '$_loadedFruits/$_totalFruits fruits loaded!',
              style: const TextStyle(fontSize: 18),
            ),
          ),
        ),
      ],
    );
  }

  // 接收加载的水果快照和 ListView 索引，并构建相应的项目。
  Widget _buildFruitTile(
      BuildContext context, AsyncSnapshot<List<String>> snapshot, int index) {
    _loadedFruits = snapshot.data?.length ?? 0;
    return ListTile(
      title: Text(
        snapshot.data?[index] ?? 'Something went wrong!!!',
        style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
      ),
    );
  }

  void _onTextChanged(String newSearchString) {
    // 如果搜索文本发生变化，才更新流，以避免昂贵的重复数据库查询。
    if (_searchString == newSearchString) {
      return;
    }
    setState(() {
      _searchString = newSearchString;
      _initializeFruitStream();
    });
  }
}