Flutter高级网格布局插件flutter_super_grid的使用

Flutter高级网格布局插件flutter_super_grid的使用

简介

flutter_super_grid 是一个可高度自定义的Flutter插件，用于显示分段的网格视图。它提供了多种配置选项，支持项目点击回调、水平和垂直方向的网格显示、以及自定义样式等功能。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_super_grid: ^1.0.9

然后运行以下命令以安装依赖：

$ flutter pub get

主要功能

• 可自定义的网格视图：支持分段显示，并提供多种配置选项。
• 项目点击回调：支持通过回调函数获取分段和项目的索引。
• 水平网格：可以选择将网格水平显示。
• 自定义分段标题：支持自定义分段标题的样式和对齐方式。

示例代码

下面是一个完整的示例代码，展示了如何使用 flutter_super_grid 插件创建不同类型的网格视图（SectionGridView、FlatGridView 和 SimpleGridView）。

1. 创建主应用

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Super Grid Demo',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.white)
            .copyWith(background: Colors.black),
      ),
      home: const MyHomePage(title: 'Super Grid Sample App'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black,
          bottom: const TabBar(
            labelColor: Colors.white,
            dividerColor: Colors.white,
            indicatorColor: Colors.white,
            unselectedLabelColor: Colors.grey,
            tabs: [
              Tab(text: 'SectionGrid'),
              Tab(text: 'FlatGrid'),
              Tab(text: 'SimpleGrid'),
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            SectionGridExample(),
            FlatGridExample(),
            SimpleGridExample(),
          ],
        ),
      ),
    );
  }
}

2. SectionGridView 示例

class SectionGridExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 模拟数据
    final List<Map<String, dynamic>> sections = [
      {
        'title': '水果',
        'items': ['苹果', '香蕉', '橙子'],
      },
      {
        'title': '蔬菜',
        'items': ['胡萝卜', '西兰花', '菠菜'],
      },
    ];

    return SectionGridView(
      sections: sections.map((section) {
        return Section(
          title: section['title'],
          items: section['items'].map((item) => Item(data: item)).toList(),
        );
      }).toList(),
      renderItem: (itemData) {
        // 自定义每个项目的显示方式
        return Card(
          child: Center(
            child: Text(itemData),
          ),
        );
      },
      itemsPerRow: 3, // 每行显示3个项目
      itemSize: 120, // 项目大小
      verticalSpacing: 10, // 垂直间距
      horizontalSpacing: 10, // 水平间距
      onPressed: (sectionIndex, itemIndex) {
        // 项目点击回调
        print('点击了第 $sectionIndex 个分段的第 $itemIndex 个项目');
      },
    );
  }
}

3. FlatGridView 示例

class FlatGridExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 模拟数据
    final List<String> data = [
      '苹果', '香蕉', '橙子', '胡萝卜', '西兰花', '菠菜'
    ];

    return FlatGridView(
      data: data,
      renderItem: (itemData) {
        // 自定义每个项目的显示方式
        return Card(
          child: Center(
            child: Text(itemData),
          ),
        );
      },
      itemsPerRow: 3, // 每行显示3个项目
      itemSize: 120, // 项目大小
      verticalSpacing: 10, // 垂直间距
      horizontalSpacing: 10, // 水平间距
      onPressed: (index) {
        // 项目点击回调
        print('点击了第 $index 个项目');
      },
    );
  }
}

4. SimpleGridView 示例

class SimpleGridExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 模拟数据
    final List<String> data = [
      '苹果', '香蕉', '橙子', '胡萝卜', '西兰花', '菠菜'
    ];

    return SimpleGridView(
      data: data,
      renderItem: (itemData) {
        // 自定义每个项目的显示方式
        return Card(
          child: Center(
            child: Text(itemData),
          ),
        );
      },
      itemSize: 120, // 项目大小
      verticalSpacing: 10, // 垂直间距
      horizontalSpacing: 10, // 水平间距
    );
  }
}