Flutter插件grouper的使用

插件grouper是一个在2022年开发者节挑战赛期间开发的用于将元素分组到卡片中的包。您可以自定义以下属性：

• 标题
• 颜色
• 最大元素数量
• 圆角半径
• 单个元素
• 标题样式
• X方向内边距
• Y方向内边距
• X方向间距
• Y方向间距
• 按钮样式
• 对齐方式

以下是该插件的演示图：

使用示例

以下是一个完整的示例代码，展示如何使用grouper插件来创建一个带有分组元素的卡片。

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:grouper/grouper.dart';

// 主应用类
void main() {
  runApp(const MyApp());
}

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

  // 构建应用界面
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 移除调试标志
      title: 'Flutter Demo', // 应用标题
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主色调
      ),
      home: const Material(child: MyHomePage()), // 主页面
    );
  }
}

// 主页面类
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  // 构建页面内容
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义一组元素
    List<Individualmodel> group = [
      Individualmodel(imageUrl: 'assets/localPict.jpg', isNet: false), // 当地图片
      Individualmodel(
          imageUrl:
              'https://upload.wikimedia.org/wikipedia/commons/8/8c/Cristiano_Ronaldo_2018.jpg', // 网络图片
          isNet: true),
      Individualmodel(imageUrl: 'assets/localPict.jpg', isNet: false), // 当地图片
      Individualmodel(
          imageUrl:
              'https://upload.wikimedia.org/wikipedia/commons/8/8c/Cristiano_Ronaldo_2018.jpg', // 网络图片
          isNet: true),
      Individualmodel(imageUrl: 'assets/localPict.jpg', isNet: false), // 当地图片
      Individualmodel(
          imageUrl:
              'https://upload.wikimedia.org/wikipedia/commons/8/8c/Cristiano_Ronaldo_2018.jpg', // 网络图片
          isNet: true),
      Individualmodel(imageUrl: 'assets/localPict.jpg', isNet: false), // 当地图片
      Individualmodel(
          imageUrl:
              'https://upload.wikimedia.org/wikipedia/commons/8/8c/Cristiano_Ronaldo_2018.jpg', // 网络图片
          isNet: true),
      Individualmodel(imageUrl: 'assets/localPict.jpg', isNet: false), // 当地图片
      Individualmodel(
          imageUrl:
              'https://upload.wikimedia.org/wikipedia/commons/8/8c/Cristiano_Ronaldo_2018.jpg', // 网络图片
          isNet: true),
    ];

    // 返回中心布局
    return Center(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20), // 设置水平内边距
        child: Group(
          indiduals: group, // 分组元素
          title: 'World Cup', // 标题
          color: const Color.fromARGB(255, 150, 139, 104), // 背景颜色
          maxElmnt: 5, // 每行最多显示5个元素
          buttonStyle: const TextStyle(color: Colors.white), // 按钮文本样式
          titleStyle: const TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold), // 标题样式
          xPadding: 4, // X方向内边距
          yPadding: 20, // Y方向内边距
          ySpacing: 10, // Y方向间距
          xSpacing: 10, // X方向间距
          borderRadius: 20, // 圆角半径
          alignment: WrapAlignment.start, // 元素对齐方式
        ),
      ),
    );
  }
}