Flutter数据列表展示插件devaloop_data_list_page的使用

在本示例中，我们将演示如何使用 devaloop_data_list_page 插件来展示一个数据列表。这个插件可以帮助我们轻松地实现数据分页、搜索和添加功能。

首先，我们需要导入必要的包：

import 'package:devaloop_data_list_page/data_list_page.dart';
import 'package:flutter/material.dart';

接下来，我们将创建一个简单的 Flutter 应用程序，并使用 DataListPage 来展示数据列表。以下是完整的示例代码：

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

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

  @override
  Widget build(BuildContext context) {
    // 创建一个包含25个数据项的列表
    final List<DataItem> db = List.generate(
        25,
        (index) => DataItem(
            title: '数据 ${index + 1}',
            subtitle: Future(() async {
              await Future.delayed(const Duration(seconds: 2));
              return '数据 ${index + 1}';
            })));

    return MaterialApp(
      title: 'Flutter 示例',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: DataListPage(
        title: '产品库存',
        subtitle: '产品库存',
        // 初始化数据列表
        initial: () => Future(() async {
          await Future.delayed(const Duration(seconds: 2));
          return Wrapper(total: db.length, data: db.take(10).toList());
        }),
        // 加载更多数据
        showMore: (wrapper) => Future<Wrapper>(() async {
          await Future.delayed(const Duration(seconds: 2));
          return Wrapper(
              total: db.length,
              data: db.take(wrapper.data.length + 10).toList());
        }),
        // 添加数据
        add: (context) => Future(() async {
          await Future.delayed(const Duration(seconds: 10));
          return IsAdded.yes;
        }),
        // 搜索数据
        search: (context) => Future(() async {
          await Future.delayed(const Duration(seconds: 10));
          var searchKeyWord = [
            KeyWord(
              name: '名称',
              label: '名称',
              hiddenValue: '数据',
              showedValue: '数据',
            ),
            KeyWord(
              name: '详情',
              label: '详情',
              hiddenValue: '数据',
              showedValue: '数据',
            ),
          ];
          return MapEntry(
              searchKeyWord,
              SearchWrapper(
                searchResult: Wrapper(total: 20, data: db.take(10).toList()),
                showSearchResultMore: (wrapper, searchKeyWord) => Future(() {
                  return MapEntry(searchKeyWord,
                      Wrapper(total: 20, data: db.take(20).toList()));
                }),
              ));
        }),
      ),
    );
  }
}

代码解释

1. 导入包:

   import 'package:devaloop_data_list_page/data_list_page.dart';
   import 'package:flutter/material.dart';
   

2. 主函数:

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

3. 创建应用程序:

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       // 创建一个包含25个数据项的列表
       final List<DataItem> db = List.generate(
           25,
           (index) => DataItem(
               title: '数据 ${index + 1}',
               subtitle: Future(() async {
                 await Future.delayed(const Duration(seconds: 2));
                 return '数据 ${index + 1}';
               })));
   

4. 返回应用的根部件:

       return MaterialApp(
         title: 'Flutter 示例',
         debugShowCheckedModeBanner: false,
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
         ),
         home: DataListPage(
           title: '产品库存',
           subtitle: '产品库存',
           // 初始化数据列表
           initial: () => Future(() async {
             await Future.delayed(const Duration(seconds: 2));
             return Wrapper(total: db.length, data: db.take(10).toList());
           }),
           // 加载更多数据
           showMore: (wrapper) => Future<Wrapper>(() async {
             await Future.delayed(const Duration(seconds: 2));
             return Wrapper(
                 total: db.length,
                 data: db.take(wrapper.data.length + 10).toList());
           }),
           // 添加数据
           add: (context) => Future(() async {
             await Future.delayed(const Duration(seconds: 10));
             return IsAdded.yes;
           }),
           // 搜索数据
           search: (context) => Future(() async {
             await Future.delayed(const Duration(seconds: 10));
             var searchKeyWord = [
               KeyWord(
                 name: '名称',
                 label: '名称',
                 hiddenValue: '数据',
                 showedValue: '数据',
               ),
               KeyWord(
                 name: '详情',
                 label: '详情',
                 hiddenValue: '数据',
                 showedValue: '数据',
               ),
             ];
             return MapEntry(
                 searchKeyWord,
                 SearchWrapper(
                   searchResult: Wrapper(total: 20, data: db.take(10).toList()),
                   showSearchResultMore: (wrapper, searchKeyWord) => Future(() {
                     return MapEntry(searchKeyWord,
                         Wrapper(total: 20, data: db.take(20).toList()));
                   }),
                 ));
           }),
         ),
       );
     }
   }