Flutter迷宫生成与构建插件maze_builder的使用

简介

本库使用Dart实现了Eller算法来生成迷宫。该算法能够创建“完美的”迷宫，保证任意两个单元格之间只有一条路径，例如：

+---+---+---+---+---+---+---+
|           |           |   |
+---+   +---+   +   +   +   +
|   |   |       |   |       |
+   +   +   +   +   +   +   +
|       |   |   |   |   |   |
+   +---+   +   +---+---+   +
|   |   |   |   |   |   |   |
+   +   +   +   +   +   +   +
|   |       |   |   |       |
+   +---+   +---+   +---+---+
|   |   |   |       |       |
+   +   +   +   +---+   +   +
|                       |   |
+---+---+---+---+---+---+---+

该库生成一个二维数组的迷宫单元格，每个单元格具有以下属性：

{
  x: 4,          // 水平位置，整数
  y: 7,          // 垂直位置，整数
  top: false,    // 上面有墙/被阻挡，布尔值
  left: false,   // 左边有墙/被阻挡，布尔值
  bottom: true,  // 下面有墙/被阻挡，布尔值
  right: true,   // 右边有墙/被阻挡，布尔值
  set: 5         // 用于生成迷宫的集合编号，可以忽略
}

特性

该包的例子还使用Flutter CustomPainter绘制线条。

入门指南

在你的项目中添加库：

import 'package:maze_builder/maze_builder.dart';

使用方法

首先生成迷宫：

Random rand = Random();
List<List<Cell>> localMaze = generate(width: 200, height: 200, closed: true, seed: rand.nextInt(100000));

然后绘制迷宫：

void makeBlocks() {
  int mazeLength = maze.length;
  for (var i = 0; i < mazeLength; i++) {
    for (var j = 0; j < maze[i].length; j++) {
      getBlockLines(maze[i][j], i);
    }
  }
}

void getBlockLines(Cell cell, int index) {
  int size = 24;
  if (cell.top) {
    double x1 = cell.x * size;
    double y1 = cell.y * size;
    double x2 = cell.x * size + size;
    double y2 = cell.y * size;
    drawLine(x1, y1, x2, y2, _paint);
  }
  if (cell.bottom) {
    double x1 = cell.x * size;
    double y1 = cell.y * size + size;
    double x2 = cell.x * size + size;
    double y2 = cell.y * size + size;

    drawLine(x1, y1, x2, y2, _paint);
  }
  if (cell.left) {
    double x1 = cell.x * size;
    double y1 = cell.y * size;
    double x2 = cell.x * size;
    double y2 = cell.y * size + size;

    drawLine(x1, y1, x2, y2, _paint);
  }
  if (cell.right) {
    double x1 = cell.x * size + size;
    double y1 = cell.y * size;
    double x2 = cell.x * size + size;
    double y2 = cell.y * size + size;

    drawLine(x1, y1, x2, y2, _paint);
  }
}

// 绘制线段
void drawLine(double x, double y, double targetX, double targetY, Paint paint) {
  canvas!.drawLine(
    Offset(x, y),
    Offset(targetX, targetY),
    paint,
  );
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用maze_builder插件生成并绘制迷宫：

import 'dart:math';

import 'package:example/maze_driver.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:maze_builder/maze_builder.dart';
import 'dart:ui' as ui;

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> with TickerProviderStateMixin {
  List<List<Cell>> maze = [];
  late AnimationController _controller;
  BoxConstraints? viewportConstraints;

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

    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));

    SchedulerBinding.instance.addPostFrameCallback((_) {
      _controller.repeat();
      generateMaze();
    });
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  /// 生成迷宫
  void generateMaze() {
    int size = 24;
    Random rand = Random();
    List<List<Cell>> localMaze = generate(
        width: size, height: size, closed: true, seed: rand.nextInt(100000));

    setState(() {
      maze = localMaze;
    });
  }

  void randomize() {
    generateMaze();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const ui.Color.fromARGB(255, 0, 0, 0),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          padding: const EdgeInsets.only(left: 8.0, right: 8.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50.0),
            color: const ui.Color.fromARGB(255, 0, 0, 0),
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [],
            ),
          ),
        ),
      ),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          this.viewportConstraints = viewportConstraints;
          return Stack(
            children: [
              Transform.translate(
                offset: const Offset(50, 100),
                child: RepaintBoundary(
                  child: CustomPaint(
                    size: const ui.Size(200, 400),
                    key: UniqueKey(),
                    isComplex: true,
                    painter: MazeDriverCanvas(
                      controller: _controller,
                      maze: maze,
                      blockSize: 16,
                      width: viewportConstraints.maxWidth,
                      height: viewportConstraints.maxHeight,
                    ),
                    child: Container(
                      constraints: BoxConstraints(
                        maxWidth: viewportConstraints.maxWidth,
                        maxHeight: viewportConstraints.maxHeight,
                      ),
                    ),
                  ),
                ),
              ),
              Positioned(
                top: viewportConstraints.maxHeight - 100,
                left: viewportConstraints.maxWidth - 100,
                child: FloatingActionButton(
                  onPressed: randomize,
                  backgroundColor: Colors.green,
                  child: const Icon(Icons.refresh),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}