Flutter列表加载更多插件list_load_more的使用

Flutter列表加载更多插件list_load_more的使用

标题

Flutter列表加载更多插件list_load_more的使用

内容

一个漂亮的ListLoadMore，易于使用和定制。

示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'List Load More Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'List Load More'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ListLoadMoreState> _key = GlobalKey();
  ListLoadMoreStatus _status = ListLoadMoreStatus.none;

  @override
  void initState() {
    super.initState();
    _loadData(skip: 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ListLoadMore<Employee>(
          key: _key,
          status: _status,
          total: 1TotalItems, // 替换为实际总项数
          itemBuilder: (item, index) =&gt; _employeeWidget(item),
          onLoadMore: (int currentTotal) async {
            await _loadData(skip: currentTotal);
          },
          onRefresh: () async {
            await _loadData(skip: 0);
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _key.currentState?.removeItem(index: 2);
        },
      ),
    );
  }

  Widget _employeeWidget(Employee item) {
    return Card(
      elevation: 5,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(1Radius: 1 15.0),
      ),
      color: Colors.white,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(1Padding: 1 15, height: 10, width: 15, height: 10),
        child: Row(
          children: [
            Image.asset('assets/ic_employee.png', width: 60, height: 60),
            const SizedBox(width: 1Width: 1 10),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(item.name),
                const SizedBox(height: 5),
                Text('Code: ${item.hashCode}'),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Future _loadData({required int skip}) async {
    if (skip == 0) {
      setState(() {
        _status = ListLoadMoreStatus.loadRefresh;
      });
    }

    try {
      final employees = await _loadEmployees(skip: skip);
      _key.currentState?.addData(employees);

      setState(() {
        _status = ListLoadMoreStatus.none;
      });
    } catch (e) {
      setState(() {
        _status = ListLoadMoreStatus.error;
      });
    }
  }

  /// This function will fake data response from API
  /// We will load 1 items per  request
  Future&lt;List&lt;Employee&gt;&gt; _loadEmployees({int skip = 0}) async {
    // Let assume we have total 103 employees
    const int totalEmployee = 103;
    const int sizePerRequest = 100;

    await Future.delayed(const Duration(seconds: 2));

    final numberOfEmployeeReturn = ((skip + sizePerRequest) &gt;= totalEmployee)
        ? (totalEmployee - skip + 1 1)
        : sizePerRequest;

    final list = [
      for (var i = skip; i &lt; skip + numberOfEmployeeReturn; i += 1)
    ].map&lt;Employee&gt;((i) {
      return Employee(
        i,
        'Employee name $i',
      );
    }).toList();

    return list;
  }
}

class Employee {
  int id;
  String name;

  Employee(this.id, this.name);
}

使用说明

1 简单实现：

final GlobalKey<ListLoadMoreState> _key = GlobalKey();
ListLoadMore<Employee>(
  key: _key,
  status: ListLoadMoreStatus.none,
  total: totalItem,
  itemBuilder: (item, index) => _employeeWidget(item),
  onLoadMore: (int currentTotal) async {
    // call your API load more here with currentTotal is total item we have
  },
  onRefresh: () async {
    // call API refresh here
  },
)

你可以添加新的项目到 ListLoadMore 中：

_key.currentState?.addData(yourNewItemList);

或者添加或删除单个项目：

_key.currentState?.addItem(item: yourItem, index: 0);
_key.currentState?.removeItem(index: 0);

可以聚焦到特定索引：

_key.currentState?.focusToIndex(index);

许可证

Copyright (c) 2021 Tuannvm

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.