Flutter列表展示插件gslist的使用

特性

GSList 是一个功能强大的 Flutter 插件，用于高效地展示列表数据。它支持分页加载、占位符（shimmer）效果、空列表提示以及加载状态提示等功能。

开始使用

添加依赖

在 pubspec.yaml 文件中添加 GSList 的依赖：

dependencies:
  gslist: ^版本号

然后运行以下命令以更新依赖：

flutter pub get

使用示例

以下是完整的示例代码，展示如何使用 GSList 插件来实现一个带有分页加载和占位符效果的列表页面。

示例代码

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:gslist/gs_list/gs_list.dart';
import 'package:gslist/gs_list/models/shimmer_model.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GSList 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final MainViewModel viewModel = Get.put(MainViewModel());

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GSList 示例'),
      ),
      body: GSList<ApiResponse>(
        controller: viewModel.controller,
        onItemBuilder: (index) {
          return Item(
            model: viewModel.items[index],
          );
        },
        onLoadData: (int nextPage) {
          viewModel.getList(nextPage);
        },
        paginationEnable: true, // 启用分页
        itemCount: viewModel.items.length,
        enableShimmerLoading: true, // 启用占位符效果
        emptyWidget: const Text('列表为空'), // 空列表提示
        loadingWidget: const CircularProgressIndicator(), // 加载中提示
        shimmerProperties: ShimmerProperties(
          baseColor: Colors.grey[300]!,
          highlightColor: Colors.grey[100]!,
          child: ItemShimmer(),
        ),
      ),
    );
  }
}

class Item extends StatelessWidget {
  const Item({Key? key, required this.model}) : super(key: key);

  final ApiResponse model;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 70,
      margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            const Icon(
              Icons.ac_unit,
              color: Colors.blue,
              size: 50,
            ),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    model.title ?? '无标题',
                    style: const TextStyle(fontSize: 16, color: Colors.black54),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    model.description ?? '无描述',
                    style: const TextStyle(fontSize: 14, color: Colors.grey),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      child: Container(
        height: 70,
        decoration: BoxDecoration(
          color: Colors.grey[300]!,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              Container(
                height: 50,
                width: 50,
                decoration: BoxDecoration(
                  color: Colors.grey[200]!,
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 20,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        color: Colors.grey[100]!,
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    const SizedBox(height: 4),
                    Container(
                      height: 15,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        color: Colors.grey[100]!,
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}