Flutter开发实战之列表刷新加载与工具类封装

2023-11-19 08:25:47

Flutter开发必备：封装列表刷新加载和常用工具

简介

作为Flutter开发爱好者，列表刷新加载功能和常用工具对于提高开发效率至关重要。本文将逐步指导您封装这些功能，以便在您的项目中轻松集成和重用。

1. 创建通用列表组件

创建common_list.dart文件，并添加以下代码：

import 'package:flutter/material.dart';

class CommonList extends StatelessWidget {
  final List<String> items;
  final Widget Function(BuildContext, int) itemBuilder;

  const CommonList({
    required this.items,
    required this.itemBuilder,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: itemBuilder,
    );
  }
}

此组件接收一个数据列表items和一个用于渲染列表项的itemBuilder函数。

2. 封装刷新加载功能

在common_list.dart文件中添加以下代码：

import 'package:flutter/material.dart';

class RefreshLoadList extends StatefulWidget {
  final List<String> items;
  final Widget Function(BuildContext, int) itemBuilder;
  final Function() onRefresh;
  final Function() onLoadMore;

  const RefreshLoadList({
    required this.items,
    required this.itemBuilder,
    required this.onRefresh,
    required this.onLoadMore,
    Key? key,
  }) : super(key: key);

  @override
  State<RefreshLoadList> createState() => _RefreshLoadListState();
}

class _RefreshLoadListState extends State<RefreshLoadList> {
  // ...
}

此组件接收onRefresh和onLoadMore函数，分别用于处理下拉刷新和上拉加载。

3. 封装常用工具

创建common_utils.dart文件，并添加以下代码：

import 'package:flutter/material.dart';

class StringUtils {
  // ...
}

class NumberUtils {
  // ...
}

这些类封装了常用的字符串和数字操作方法。

4. 使用封装好的组件和工具

在main.dart文件中使用以下代码示例：

import 'package:flutter/material.dart';
import 'common_list.dart';
import 'common_utils.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CommonList(
          items: ['Item 1', 'Item 2', 'Item 3'],
          itemBuilder: (context, index) => ListTile(
            title: Text('Item ${index + 1}'),
          ),
        ),
      ),
    );
  }
}