Flutter分页网格视图插件paged_grid_view的使用

Flutter分页网格视图插件paged_grid_view的使用

paged_grid_view 是一个用于在 Flutter 中实现分页网格视图的插件。它通过调整 GridView 的性能来提供更好的滚动体验。

安装

首先，在你的 pubspec.yaml 文件中添加 paged_grid_view 作为依赖项：

dependencies:
  paged_grid_view: ^最新版本号

然后运行 flutter pub get 来获取新的依赖项。

使用

以下是一个简单的示例，展示了如何使用 PagedGridView 插件：

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return PagedGridView.builder(
      itemCount: 1000,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          mainAxisExtent: MediaQuery.sizeOf(context).width / 10,
          crossAxisCount: 10),
      scrollDirection: Axis.horizontal,
      onPageChanged: (index) {
        debugPrint('changed to page $index');
      },
      itemBuilder: (context, index) {
        return ColoredBox(
          key: UniqueKey(),
          color: Color(Random().nextInt(0xffffff) + 0xff000000),
        );
      },
    );
  }
}

示例

下面是一个更完整的示例，展示了如何使用 PagedGridView 和普通 GridView 进行比较：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:paged_grid_view/paged_grid_view.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Paged GridView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double itemsPerColumn = 50;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PagedGridView Demo'),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                const Text("Axis item count:"),
                Expanded(
                  child: Slider(
                    max: 100,
                    min: 1,
                    divisions: 99,
                    label: itemsPerColumn.round().toString(),
                    value: itemsPerColumn,
                    onChanged: (double value) {
                      setState(() {
                        itemsPerColumn = value;
                      });
                    },
                  ),
                ),
              ],
            ),
          ),
          const Padding(
            padding: EdgeInsets.all(8.0),
            child: Center(child: Text("GridView:")),
          ),
          Expanded(
              child: GridView.builder(
            itemCount: (itemsPerColumn * itemsPerColumn * 10).round(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                mainAxisExtent:
                    MediaQuery.sizeOf(context).width / itemsPerColumn.round(),
                crossAxisCount: itemsPerColumn.round()),
            scrollDirection: Axis.horizontal,
            physics: const PageScrollPhysics(),
            itemBuilder: (context, index) {
              debugPrint("gridView build item $index");
              return ColoredBox(
                key: UniqueKey(),
                color: Color(Random().nextInt(0xffffff) + 0xff000000),
              );
            },
          )),
          const Padding(
            padding: EdgeInsets.all(8.0),
            child: Center(child: Text("PagedGridView:")),
          ),
          Expanded(
              child: PagedGridView.builder(
            itemCount: (itemsPerColumn * itemsPerColumn * 10).round(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                mainAxisExtent:
                    MediaQuery.sizeOf(context).width / itemsPerColumn.round(),
                crossAxisCount: itemsPerColumn.round()),
            scrollDirection: Axis.horizontal,
            onPageChanged: (index) {
              debugPrint('changed to page $index');
            },
            itemBuilder: (context, index) {
              debugPrint("pagedGridView build item $index");
              return ColoredBox(
                key: UniqueKey(),
                color: Color(Random().nextInt(0xffffff) + 0xff000000),
              );
            },
          )),
        ],
      ),
    );
  }
}