Flutter分页列表插件ts_paginated_list的使用

ts_paginated_list 是一个用于Flutter应用中的分页列表插件，支持多种分页方式，并且可以与不同的滚动视图集成。本文将介绍如何在Flutter项目中使用该插件。

插件特点

• TsPaginatedList: 直接作为Scaffold的body使用。
• TsPaginatedPageView: 类似于PageView，但带有分页功能。
• TsPaginatedListInsideScroll: 可以嵌入到ListView、SingleChildScrollView等滚动视图中。

使用方法

数据请求示例

/// 这是一个基本的数据请求示例。
///
/// 以下示例适用于任何TsPaginated组件...
Future<TsPaginatedListResult<ModelName>> fetchData(int page, int limit) async {
  final response = await http.get('https://api.example.com/data?page=$page&limit=$pageSize');

  final data = json.decode(response.body);
  final items = data['items'].map((item) => ModelName.fromJson(item)).toList();

  return TsPaginatedListResult(
    data: items,
    isSuccess: response.statusCode == 200,
    hasNext: data['hasNext'] ?? null,
  );
}

TsPaginatedList 示例

Scaffold(
  body: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 10),
    child: TsPaginatedList(
      TsPaginatedListSettings.list(
        initialPage: 0,
        limit: 10,
        leadingSpacing: 10,
        fetchData: fetchData, // 数据获取函数
        builder: (context, item, index) {
          return YourWidget(item: item);
        },
      ),
    ),
  ),
);

TsPaginatedListInsideScroll 示例

在CustomScrollView中使用

CustomScrollView(
  controller: scrollControllerUnique, // 必须提供
  slivers: [
    YourWidget1(),
    YourWidget2(),
    TsPaginatedListInsideScroll.sliver(
      TsPaginatedListSettings.insideListScrollAsList(
        scrollController: scrollControllerUnique, // 必须提供（与前面相同）
        initialPage: 0,
        limit: 5,
        fetchData: controller.fetchData,
        builder: (context, item, index) {
          return YourWidget(item: item);
        },
      ),
    ),
  ],
);

// 或者在ListView/SingleChildScrollView中使用

ListView(
  controller: scrollControllerUnique, // 必须提供
  children: [
    YourWidget1(),
    YourWidget2(),
    TsPaginatedListInsideScroll.nonSliver(
      TsPaginatedListSettings.insideListScrollAsList(
        scrollController: scrollControllerUnique, // 必须提供（与前面相同）
        initialPage: 0,
        limit: 5,
        fetchData: controller.fetchData,
        builder: (context, item, index) {
          return YourWidget(item: item);
        },
      ),
    ),
  ],
);

TsPaginatedPageView 示例

Scaffold(
  body: TsPaginatedPageView(
    TsPaginatedPageSettings(
      initialPage: 0,
      limit: 5,
      fetchData: controller.fetchData,
      builder: (context, item, index) {
        return YourWidget(item: item);
      },
    ),
  ),
);

注意事项/已知问题

• 如果您想在一个列表中使用两个TsPaginatedListInsideScroll小部件，目前这不被支持，可能会导致错误。（我们计划尽快实现此功能）

完整示例Demo

以下是一个完整的示例demo，展示了如何在Flutter项目中使用ts_paginated_list插件：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ts_pagination_list_example/routes/app_pages.dart';

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'TsPaginationList Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const TsPaginationListExample(),
      getPages: AppPages.routes,
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () => Get.toNamed(Routes.paginationBody),
                child: const Text('Pagination list in body'),
              ),
            ),
            const SizedBox(height: 15),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () => Get.toNamed(Routes.paginationInsideList),
                child: const Text('Pagination list existing scroll view'),
              ),
            ),
            const SizedBox(height: 15),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () => Get.toNamed(Routes.paginationPage),
                child: const Text('Pagination page view'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}