Flutter动态列表视图插件flutter_dynamic_list_view的使用

功能

• 从特定滚动偏移处缓存数据
• 从特定滚动偏移处应用缓存数据

开始使用

步骤1：创建Flutter项目并添加依赖

在pubspec.yaml文件中添加flutter_dynamic_list_view包：

dependencies:
  flutter:
    sdk: flutter
  flutter_dynamic_list_view: ^x.y.z # 替换为最新版本号

然后运行flutter pub get以获取依赖项。

步骤2：创建数据提供者

在lib/data_provider.dart文件中，定义数据提供者类。以下是一个示例：

import 'package:flutter/foundation.dart';

class ExampleItem extends Item {
  final String _id;

  ExampleItem({required String id}) : _id = id;

  @override
  String get id {
    return _id;
  }
}

class ExampleData extends ListData {
  @override
  int get maintainSize {
    return 20;
  }
}

class ExampleDataProvider extends DataProvider {
  static const int total = 1000;
  static const int _pageSize = 100;
  Item current = ExampleItem(id: "${(total / 2).toInt()}");
  
  @override
  Future<Data> fetch() async {
    if (current != null) {
      Data data = await fetchPrevious(current!);
      data.insert((await fetchNext(current!)).all(), CrudHint.tail);
      return data;
    }
    return fetchOldest();
  }

  Future<Data> fetchLatest() async {
    return _fetch(total - _pageSize);
  }

  @override
  Future<Data> fetchNext(Item lastItem) async {
    print(lastItem.id);
    return _fetch(int.parse(lastItem.id));
  }

  Future<Data> fetchOldest() async {
    return _fetch(0);
  }

  @override
  Future<Data> fetchPrevious(Item firstItem) {
    return _fetch(int.parse(firstItem.id) - _pageSize);
  }

  Future<Data> _fetch(int start) async {
    await Future.delayed(const Duration(seconds: 1));
    Data data = ExampleData();
    List<ExampleItem> items = [];
    int end = start + _pageSize;
    if (end > total) {
      end = total;
    }
    if (start < 0) {
      start = 0;
    }
    for (var i = start; i < end; i++) {
      items.add(ExampleItem(id: "$i"));
    }
    data.insert(items, CrudHint.tail);
    return data;
  }

  @override
  int get pageSize => _pageSize;
}

步骤3：创建主页面

在lib/main.dart文件中，创建主页面并集成动态列表视图。以下是一个示例：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:flutter_dynamic_list_view/data_provider.dart';
import 'package:flutter_dynamic_list_view/dynamic_list_controller.dart';
import 'package:flutter_dynamic_list_view/dynamic_list_view.dart';
import 'package:flutter_dynamic_list_view/scroll_judge.dart';
import 'package:flutter_dynamic_list_view/scroll_to_index.dart';
import 'package:example/data_provider.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late DynamicListController controller;
  bool _loading = false;
  final AutoScrollController _scrollController = AutoScrollController();

  @override
  void initState() {
    controller = DynamicListController(
      provider: ExampleDataProvider(),
      scrollJudge: DefaultScrollJudge(),
    );
    controller.loadingNext.addListener(() {
      setState(() {
        _loading = controller.loadingNext.value;
      });
    });
    controller.loadingPrevious.addListener(() {
      setState(() {
        _loading = controller.loadingPrevious.value;
      });
    });
    controller.initItems(minimumWait: const Duration(seconds: 10));
    super.initState();
  }

  _scrollToBottom() {
    controller.scrollToBottom(
      _scrollController,
      duration: const Duration(milliseconds: 500),
    );
  }

  _scrollToTop() {
    controller.scrollToTop(
      _scrollController,
      duration: const Duration(milliseconds: 500),
    );
  }

  _randScroll() {
    var all = controller.items.all();
    int index = Random().nextInt(all.length);
    Item item = all[index];
    print("index: $index, item: ${item.id}");
    controller.scrollToItem(
      _scrollController,
      item,
      duration: const Duration(milliseconds: 500),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DynamicListView(
        minHeight: 1000,
        onContentHeightChanged: (contentHeight) {
          if (kDebugMode) {
            print("content height: $contentHeight");
          }
        },
        header: SliverAppBar(
          title: Text(widget.title),
          actions: [
            TextButton(
                onPressed: _changeBottomHeight,
                child: const Text("BOTTOM HEIGHT")),
            TextButton(
                onPressed: _changeTopHeight,
                child: const Text("TOP HEIGHT")),
            TextButton(
                onPressed: _randScroll, child: const Text("TO RAND")),
            TextButton(
                onPressed: _scrollToTop, child: const Text("TO TOP")),
            TextButton(
                onPressed: _scrollToBottom, child: const Text("TO BOTTOM")),
          ],
          elevation: 8,
          pinned: true,
          bottom: PreferredSize(
              preferredSize: const Size.fromHeight(2),
              child: SizedBox(
                  height: 2,
                  child: _loading ? const LinearProgressIndicator() : null)),
        ),
        scrollController: _scrollController,
        itemsBuilder: (List<Item> data) {
          List<Widget> children = [];
          for (var i = 0; i < data.length; i++) {
            children.add(ItemWrap(
                scrollController: _scrollController,
                index: i,
                child: Container(
                    color: Colors.green,
                    margin: const EdgeInsets.all(10),
                    padding: const EdgeInsets.all(20),
                    child: Text(data[i].id))));
          }
          return children;
        },
        controller: controller,
      ),
    );
  }
}

运行应用

最后，运行应用：

flutter run