Flutter固定网格布局插件flutterzilla_fixed_grid的使用

Flutter固定网格布局插件flutterzilla_fixed_grid的使用

插件介绍

默认的Flutter GridView 会根据屏幕大小调整其容器的比例，因此在小屏幕上看起来可能很正常，但在大屏幕上可能会显得不美观。flutterzilla_fixed_grid 插件允许你为 GridView 设置固定的高度，从而确保在不同屏幕尺寸下布局的一致性。

安装步骤

1. 在 pubspec.yaml 文件中添加最新版本的插件依赖（并运行 flutter pub get）：

   dependencies:
     flutterzilla_fixed_grid: ^0.0.4
   

2. 在你的 Flutter 应用中导入并使用该插件：

   import 'package:flutterzilla_fixed_grid/flutterzilla_fixed_grid.dart';
   

示例代码

以下是一个完整的示例 Demo，展示了如何使用 flutterzilla_fixed_grid 插件创建一个固定高度的 GridView。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutterzilla_fixed_grid/flutterzilla_fixed_grid.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 设置状态栏颜色为透明
    SystemChrome.setSystemUIOverlayStyle(
        const SystemUiOverlayStyle(statusBarColor: Colors.transparent));
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutterzilla Fixed Grid',
      home: MyHomePage(title: 'Flutterzilla Fixed Grid'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.title,
          style: const TextStyle(color: Colors.grey, fontSize: 17),
        ),
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: GridView.builder(
          gridDelegate: const FlutterzillaFixedGridView(
            crossAxisCount: 2, // 每行显示的列数
            mainAxisSpacing: 20, // 主轴方向的间距
            crossAxisSpacing: 20, // 横轴方向的间距
            height: 143, // 固定的高度
          ),
          padding: const EdgeInsets.only(top: 30),
          itemCount: 6, // 网格项的数量
          shrinkWrap: true, // 自动调整高度
          clipBehavior: Clip.none, // 不裁剪子组件
          physics: const NeverScrollableScrollPhysics(), // 禁止滚动
          itemBuilder: (context, index) {
            return InkWell(
              splashColor: Colors.transparent, // 点击时的水波纹颜色
              highlightColor: Colors.transparent, // 点击时的高亮颜色
              onTap: () {}, // 点击事件
              child: Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Colors.purple, // 背景颜色
                  borderRadius: BorderRadius.circular(8), // 圆角
                  boxShadow: [
                    BoxShadow(
                      color: Colors.purple.withOpacity(0.32), // 阴影颜色
                      spreadRadius: -2, // 扩展半径
                      blurRadius: 13, // 模糊半径
                      offset: const Offset(0, 8), // 阴影偏移
                    ),
                  ],
                ),
                padding: const EdgeInsets.symmetric(horizontal: 19, vertical: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    Icon(
                      Icons.ac_unit, // 图标
                      size: 25,
                      color: Colors.white,
                    ),
                    SizedBox(height: 8), // 间距
                    Text(
                      "Software Engineers", // 标题
                      textAlign: TextAlign.left,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 15,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 8), // 间距
                    Text(
                      "20 Chapters", // 子标题
                      textAlign: TextAlign.center,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}