Flutter自定义组件集合插件widgets_list的使用

该插件用于处理具有无限滚动和下拉刷新功能的列表项。

使用示例

以下是一个完整的示例代码，展示如何使用 widgets_list 插件来创建一个带有无限滚动和下拉刷新功能的列表。

完整代码

import 'package:flutter/material.dart';
import 'package:widgets_list/widgets_list.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这是应用的根组件。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 应用的主题颜色。
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WidgetsList<String?>(
        // 设置列表类型为垂直滚动。
        type: ListType.VERTICAL_SCHROLL,
        // 每个列表项的构建器。
        builder: (context, item) {
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(16.0), // 增加内边距以提高可读性。
              child: Text(item ?? ''), // 显示列表项内容。
            ),
          );
        },
        // 是否已加载数据。
        loaded: true,
        // 列表数据源。
        items: [
          "苹果",
          "香蕉",
          "橙子",
          "葡萄",
          "西瓜",
          "草莓",
          "芒果",
          "樱桃",
          "菠萝",
          "梨",
          "桃子",
          "李子",
          "蓝莓",
          "覆盆子",
          "猕猴桃",
          "木瓜",
          "柠檬",
          "椰子",
          "石榴",
          "无花果",
        ],
      ),
    );
  }
}

代码说明

1. 导入必要的库：

   import 'package:flutter/material.dart';
   import 'package:widgets_list/widgets_list.dart';
   

   导入 Flutter 的核心库和 widgets_list 插件。

2. 创建主应用类：

   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(primarySwatch: Colors.blue),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

   创建一个简单的 Material 风格的应用程序，并设置主题颜色为蓝色。

3. 创建主页状态类：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key, required this.title}) : super(key: key);
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: WidgetsList<String?>(
           type: ListType.VERTICAL_SCHROLL,
           builder: (context, item) {
             return Card(
               child: Padding(
                 padding: const EdgeInsets.all(16.0),
                 child: Text(item ?? ''),
               ),
             );
           },
           loaded: true,
           items: [
             "苹果",
             "香蕉",
             "橙子",
             "葡萄",
             "西瓜",
             "草莓",
             "芒果",
             "樱桃",
             "菠萝",
             "梨",
             "桃子",
             "李子",
             "蓝莓",
             "覆盆子",
             "猕猴桃",
             "木瓜",
             "柠檬",
             "椰子",
             "石榴",
             "无花果",
           ],
         ),
       );
     }
   }