Flutter网格布局设计插件 design_grid 的使用

design_grid 是一个强大的 Flutter 插件，可以帮助开发者轻松实现响应式和基于 Material Design 规范的网格布局。本文将详细介绍如何使用 design_grid 插件，并提供完整的示例代码。

目录

• ✨ 特性
  • 响应式设计网格
  • Material 设计网格
• 🎉 入门指南
• 🏗️ 使用方法
  • 响应式设计网格
    • 基本用法
    • 调整断点
    • 自定义网格
  • Material 设计网格
• 📚 额外信息

✨ 特性

响应式设计网格

ResponsiveDesignGrid 提供了一种类似于 Bootstrap 的列式布局系统，每个元素在不同的断点下可以有不同的列跨度（column-span）。你可以根据需要无限嵌套设计网格。

支持自定义：

• 断点
• 列间距
• 行间距
• 网格外边距
• 列数

Material 设计网格

MaterialDesignGrid 实现了严格的 Material Design 布局规范。它不支持嵌套，适合需要严格遵循 Material Design 规范的应用。

支持自定义：

• 断点
• 列间距
• 行间距
• 网格外边距
• 每个断点的列数

🎉 入门指南

在开始使用 design_grid 之前，首先需要决定是使用 ResponsiveDesignGrid 还是 MaterialDesignGrid。与设计师沟通以确保你理解了他们的设计需求。

安装插件

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

dependencies:
  design_grid: ^latest_version

然后运行 flutter pub get 来安装插件。

🏗️ 使用方法

响应式设计网格

基本用法

下面是一个简单的响应式设计网格示例：

[@override](/user/override)
Widget build(BuildContext context) {
  return ResponsiveDesignGridConfig(
    child: ResponsiveDesignGrid(
      children: [
        ResponsiveDesignGridRow(
          children: [
            ResponsiveDesignGridItem(
              columns: ResponsiveDesignGridColumns(
                small: 12,
                medium: 10,
                large: 8,
                extraLarge: 6,
              ),
              child: Placeholder(),
            ),
          ],
        ),
      ],
    ),
  );
}

调整断点

你可以通过 ResponsiveDesignGridBreakpoints 类来调整默认的断点值：

[@override](/user/override)
Widget build(BuildContext context) {
  return ResponsiveDesignGridConfig(
    breakpoints: const ResponsiveDesignGridBreakpoints(
      small: 375,
      medium: 768,
      large: 1280,
      extraLarge: 1920,
    ),
    child: ResponsiveDesignGrid(
      children: [
        ResponsiveDesignGridRow(
          children: [
            ResponsiveDesignGridItem(
              columns: ResponsiveDesignGridColumns(
                small: 12,
                medium: 10,
                large: 8,
                extraLarge: 6,
              ),
              child: Placeholder(),
            ),
          ],
        ),
      ],
    ),
  );
}

自定义网格

你可以通过 ResponsiveDesignGridThemeData 类来自定义列数、列间距、行间距和网格外边距：

[@override](/user/override)
Widget build(BuildContext context) {
  return ResponsiveDesignGridConfig(
    theme: ResponsiveDesignGridThemeData(
      columns: 12,
      columnSpacing: 16.0,
      rowSpacing: 16.0,
      gridPadding: 16.0,
    ),
    child: ResponsiveDesignGrid(
      children: [
        ResponsiveDesignGridRow(
          children: [
            ResponsiveDesignGridItem(
              columns: ResponsiveDesignGridColumns(
                small: 12,
                medium: 10,
                large: 8,
                extraLarge: 6,
              ),
              child: Placeholder(),
            ),
          ],
        ),
      ],
    ),
  );
}

Material 设计网格

MaterialDesignGrid 不支持嵌套，并且必须位于 MaterialDesignGridTheme 小部件之上。

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialDesignGridTheme(
    child: MaterialDesignGrid(
      children: [
        MaterialDesignGridRow(
          children: [
            MaterialDesignGridItem(
              columns: 4,
              child: Placeholder(),
            ),
          ],
        ),
      ],
    ),
  );
}

📚 额外信息

所有类和暴露的属性都有详细的文档说明。如果发现文档不足，可以通过 创建问题 来反馈。

示例应用

下面是一个完整的示例应用，展示了如何使用 ResponsiveDesignGrid 和 MaterialDesignGrid：

import 'package:design_grid/design_grid.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Brightness brightness = Brightness.light;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Design Grid Example',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: brightness,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          leading: const Icon(Icons.grid_on_rounded),
          actions: [
            IconButton(
              onPressed: () => setState(() {
                brightness = brightness == Brightness.dark ? Brightness.light : Brightness.dark;
              }),
              icon: brightness == Brightness.dark
                  ? const Icon(Icons.light_mode_rounded)
                  : const Icon(Icons.dark_mode_rounded),
            ),
          ],
          title: const Text('Design Grid Example'),
        ),
        body: ListView(
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          children: const [
            ResponsiveDesignGridExample(),
            Divider(height: 64.0),
            MaterialDesignGridExample(),
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ResponsiveDesignGridConfig(
      breakpoints: const ResponsiveDesignGridBreakpoints(
        small: 375,
        medium: 768,
        large: 1280,
        extraLarge: 1920,
      ),
      child: ResponsiveDesignGridDebugOverlay(
        enableControls: kDebugMode,
        child: ResponsiveDesignGrid(
          children: [
            ResponsiveDesignGridRow(
              alignment: DesignGridRowAlignment.center,
              children: [
                ResponsiveDesignGridItem(
                  columns: const ResponsiveDesignGridColumns(
                    small: 12,
                    medium: 8,
                    large: 6,
                    extraLarge: 4,
                  ),
                  child: Card(
                    child: Column(
                      children: const [
                        ListTile(title: Text('Responsive Design Grid')),
                        Padding(
                          padding: EdgeInsets.all(16.0),
                          child: Text(
                            'This example shows how to use the ResponsiveDesignGrid. This element spans 12 columns on small screens, 10 columns on medium screens, 8 columns on large screens, and 6 columns on extra large screens.\nThe floating action button toggles the debug overlay.',
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            // Add more rows as needed...
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialDesignGridTheme(
      child: MaterialDesignGridDebugOverlay(
        child: MaterialDesignGrid(
          children: [
            MaterialDesignGridRow(
              children: [
                MaterialDesignGridItem(
                  columns: 4,
                  child: Card(
                    child: Column(
                      children: const [
                        ListTile(title: Text('Material Design Grid')),
                        Padding(
                          padding: EdgeInsets.all(16.0),
                          child: Text(
                            'This is a Material Design Grid example. The Material Design Grid uses a varying number of columns depending on the screen size. Its children are given a fixed number of columns.\nThe floating action button toggles the debug overlay.',
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            // Add more rows as needed...
          ],
        ),
      ),
    );
  }
}