Flutter粘性网格视图插件sticky_grid_view的使用

特性

在列表视图中列出网格视图会导致性能不佳（显示优化失败），因为ListView仅优化某些自身元素。它不会去优化其子组件。因此，GridView的元素会排除在这种状态之外。

此外，StickyGridView会优化自身及其所有子组件，并防止延迟。

使用方法

首先，创建头部列表。然后创建一个Map<String, List<GridImage>>映射。

List<String> headers = [
    'Flags 1',
    'Flags 2',
    'Flags 3',
    'Flags 4',
    'Flags 5',
    'Flags 6'
  ];
  Map<String, List<GridImage>> map = {};

接下来初始化映射：

Future<void> initMap() async {
  double width = 28;
  double height = 20;
  for (int i = 0; i < headers.length; i++) {
    List<GridImage> gridImages = [];
    double y = i * height;
    int range = 5 + Random().nextInt(11);
    for (int j = 0; j < range; j++) {
      double x = j * width;
      GridImage gridImage = GridImage.fromAssetPart(
          'assets/images/all_flags.png', x, y, width, height);
      await gridImage.initUiImage();
      gridImages.add(gridImage);
    }
    map[headers[i]] = gridImages;
  }
}

最后，在构建方法中使用StickyGridView：

Widget build(BuildContext context) {
  return StickyGridView(
      crossAxisCount: 6,
      map: map,
      headers: headers,
      onClick: (section, index) {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('Section: $section, index: $index , header: ${headers[section]}'), duration: const Duration(milliseconds: 500),));
      });
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用StickyGridView插件：

import 'dart:developer' as dev;
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:sticky_grid_view/grid_image.dart';
import 'package:sticky_grid_view/sticky_grid_view.dart';

void main() {
  runApp(MainWidget());
}

class MainWidget extends StatelessWidget {
  List<String> headers = [
    'Flags 1',
    'Flags 2',
    'Flags 3',
    'Flags 4',
    'Flags 5',
    'Flags 6'
  ];
  Map<String, List<GridImage>> map = {};

  late Future<void> init;

  MainWidget({Key? key}) : super(key: key) {
    init = initMap();
  }

  Future<void> initMap() async {
    double width = 28;
    double height = 20;
    for (int i = 0; i < headers.length; i++) {
      List<GridImage> gridItems = [];
      double y = i * height;
      int range = 5 + Random().nextInt(11);
      for (int j = 0; j < range; j++) {
        double x = j * width;
        GridImage gridItem = GridImage.fromAssetPart(
            'assets/images/all_flags.png', x, y, width, height);
        await gridItem.initUiImage();
        gridItems.add(gridItem);
      }
      map[headers[i]] = gridItems;
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.deepPurple,
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: const Text('StickyGridView'),
          centerTitle: true,
        ),
        body: FutureBuilder(
            future: init,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(child: CircularProgressIndicator());
              }
              if (snapshot.hasError) {
                String error = "错误: " + snapshot.error.toString();
                return Center(child: Text(error));
              }
              return StickyGridView(
                headerFontSize: 19,
                backgroundColor: Colors.deepPurple.shade50,
                headerColor: Colors.deepPurple,
                headerTextColor: Colors.white,
                crossAxisCount: 6,
                map: map,
                headers: headers,
                onClick: (int section, int index) {
                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                      content: Text(
                          'Section: $section, index: $index , header: ${headers[section]}'),
                      duration: const Duration(milliseconds: 500)));
                },
              );
            }),
      ),
    );
  }
}