Flutter网格布局插件grid_paper的使用

简介

grid_paper 是一个在 Flutter 中实现可滚动和可缩放网格布局的插件。通过该插件，你可以轻松地创建带有网格背景的应用界面。

说明：这是一个滚动和缩放的网格图案。

项目说明

该项目是一个由 Flutter Bounty Hunters 发起的概念验证项目。如果你希望增加更多的图案或功能，请考虑资助一个里程碑。

使用示例

基本用法

GridPaper 示例

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return GridPaper(
      gridUnitSize: 25, // 网格单元大小
      originAlignment: Alignment.center, // 网格原点对齐方式
      background: Colors.blueAccent, // 背景颜色
      gridColor: Colors.white, // 网格颜色
    );
  }
}

DotMatrixPaper 示例

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return DotMatrixPaper(
      gridUnitSize: 25, // 网格单元大小
      originAlignment: Alignment.center, // 网格原点对齐方式
      background: const Color(0xFF444444), // 背景颜色
      style: const DotMatrixStyle.standard().copyWith(divider: DotMatrixDivider.cross), // 点阵样式
    );
  }
}

完整示例

以下是一个完整的示例，展示了如何使用 grid_paper 插件来创建一个包含滚动和缩放功能的网格布局。

main.dart

import 'package:floating_action_bubble/floating_action_bubble.dart';
import 'package:flutter/material.dart' hide GridPaper;
import 'package:grid_paper/grid_paper.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Grid Paper Demo',
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late final Animation<double> _animation;
  late final AnimationController _animationController;

  _Demo _demoPage = _Demo.gridPaper;

  Offset _panOffset = Offset.zero;
  double _zoomPercent = 1.0;

  [@override](/user/override)
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 260),
    );

    final curvedAnimation = CurvedAnimation(curve: Curves.easeInOut, parent: _animationController);
    _animation = Tween<double>(begin: 0, end: 1).animate(curvedAnimation);
  }

  void _showDemo(_Demo demo) {
    if (demo == _demoPage) {
      return;
    }

    setState(() {
      _demoPage = demo;
    });
  }

  void _onPanUpdate(DragUpdateDetails details) {
    setState(() {
      _panOffset -= details.delta;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onPanUpdate: _onPanUpdate,
        child: Stack(
          children: [
            _buildDemo(), // 显示当前选择的演示页面
            _buildLabel(), // 显示标签
            Align(
              alignment: Alignment.centerLeft,
              child: SizedBox(
                width: 50,
                child: RotatedBox(
                  quarterTurns: -1,
                  child: SizedBox(
                    width: 200,
                    child: Slider(
                      value: _zoomPercent,
                      min: 0.1,
                      max: 3.0,
                      thumbColor: Colors.white,
                      activeColor: Colors.white.withOpacity(0.8),
                      inactiveColor: Colors.white.withOpacity(0.5),
                      onChanged: (double value) {
                        setState(() {
                          _zoomPercent = value;
                        });
                      },
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      floatingActionButton: _buildFab(), // 浮动按钮
    );
  }

  Widget _buildDemo() {
    switch (_demoPage) {
      case _Demo.gridPaper:
        return GridPaper(
          panOffset: _panOffset, // 平移偏移量
          zoomPercent: _zoomPercent, // 缩放百分比
          gridUnitSize: 25, // 网格单元大小
          originAlignment: Alignment.center, // 网格原点对齐方式
          background: Colors.blueAccent, // 背景颜色
          gridColor: Colors.white, // 网格颜色
        );
      case _Demo.dotMatrix:
        return DotMatrixPaper(
          panOffset: _panOffset, // 平移偏移量
          zoomPercent: _zoomPercent, // 缩放百分比
          gridUnitSize: 25, // 网格单元大小
          originAlignment: Alignment.center, // 网格原点对齐方式
          background: const Color(0xFF444444), // 背景颜色
          style: const DotMatrixStyle.standard().copyWith(divider: DotMatrixDivider.cross), // 点阵样式
        );
    }
  }

  Widget _buildLabel() {
    late final String labelName;
    switch (_demoPage) {
      case _Demo.gridPaper:
        labelName = "Grid Paper";
        break;
      case _Demo.dotMatrix:
        labelName = "Dot Matrix";
        break;
    }

    return Positioned.fill(
      child: Align(
        alignment: Alignment.center,
        child: Transform.translate(
          offset: -_panOffset,
          child: FractionalTranslation(
            translation: const Offset(0.65, -1.2),
            child: Text(
              labelName,
              style: const TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildFab() {
    return FloatingActionBubble(
      items: <Bubble>[
        Bubble(
          title: "Grid Paper",
          iconColor: Colors.black,
          bubbleColor: Colors.white,
          icon: Icons.architecture,
          titleStyle: const TextStyle(fontSize: 16, color: Colors.black),
          onPress: () {
            _showDemo(_Demo.gridPaper);
            _animationController.reverse();
          },
        ),
        Bubble(
          title: "Dot Matrix",
          iconColor: Colors.black,
          bubbleColor: Colors.white,
          icon: Icons.share,
          titleStyle: const TextStyle(fontSize: 16, color: Colors.black),
          onPress: () {
            _showDemo(_Demo.dotMatrix);
            _animationController.reverse();
          },
        ),
      ],
      iconColor: Colors.black,
      iconData: Icons.menu,
      backGroundColor: Colors.white,
      animation: _animation,
      onPress: () => _animationController.isCompleted ? _animationController.reverse() : _animationController.forward(),
    );
  }
}

enum _Demo {
  gridPaper,
  dotMatrix,
}