Flutter绘图教学插件 flutter_turtle 的使用

flutter_turtle 是一个简单的基于 Flutter 的海龟绘图实现。它通过一系列类似于 Logo 语言的命令来绘制图形，主要依赖于自定义画布（Custom Painter）进行绘图。

简介

flutter_turtle 提供了两种类：TurtleView 和 AnimatedTurtleView。前者用于静态绘图，后者则增加了动画效果。

示例

以下是一个快速示例，展示了如何使用 TurtleView 来绘制图形：

import 'package:flutter/material.dart';
import 'package:flutter_turtle/flutter_turtle.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Turtle Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Turtle')),
        body: TurtleView(
          commands: [
            PenDown(),
            SetColor((_) => Color(0xffff9933)),
            SetStrokeWidth((_) => 2),
            Repeat((_) => 20, [
              Repeat((_) => 180, [
                Forward((_) => 25.0),
                Right((_) => 20),
              ]),
              Right((_) => 18),
            ]),
            PenUp(),
          ],
        ),
      ),
    );
  }
}

使用方法

基本用法

创建 TurtleView 或 AnimatedTurtleView 实例，并将命令列表传递给 commands 参数，然后将其插入到你的 widget 树中即可。

DSL（领域特定语言）

flutter_turtle 提供了一套 Dart 类来表示控制海龟的命令。这些命令类似于在 Logo 语言中使用的命令，但它们实际上是 Dart 对象的组合。

例如，在 Logo 中你可能会写：

repeat 5 [ fd 100 rt 144 ]

而在 Flutter Turtle DSL 中则是：

[
  Repeat((_) => 5, [
    Forward((_) => 200),
    Right((_) => 144),
  ]),
];

流程控制

• IfElse：类似于 Dart 中的 if...else...。
• Repeat：用于循环。

示例：

// If it is true, go forward for 10 pixels, otherwise go back for 10 pixels.
IfElse((_)= >true, [Forward((_)= >10.0)], [Back(()= >10.0)]),

// Repeat 10 times.
Repeat((_)= >10, [Forward((_)= >10.0)]),

宏

虽然没有真正的函数，但可以通过宏来模拟。首先定义宏：

SetMacro('macro', [Forward((_)= >10.0)]), // A new macro named "macro".

然后调用宏：

RunMacro('macro', (_)= >{'arg1': 'value1', 'arg2': 'value2'}),

支持的命令

海龟运动

• PenDown
• PenUp
• Left
• Right
• Forward
• Back
• SetColor
• SetStrokeWidth
• GoTo
• ResetPosition
• ResetHeading
• Label
• SetLabelHeight

流程控制

• If
• IfElse
• Repeat

宏

• SetMacro
• RunMacro

完整示例 Demo

下面是一个完整的示例 Demo，展示了一些基本的绘图操作：

import 'package:flutter/material.dart';
import 'package:flutter_turtle/flutter_turtle.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Turtle Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Turtle Examples')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => StarPage()));
              },
              child: Text('Star'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => SpiralPage()));
              },
              child: Text('Spiral'),
            ),
          ],
        ),
      ),
    );
  }
}

class StarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Star')),
      body: TurtleView(
        commands: [
          PenDown(),
          SetColor((_) => Colors.blue),
          Repeat((_) => 5, [
            Forward((_) => 100),
            Right((_) => 144),
          ]),
          PenUp(),
        ],
      ),
    );
  }
}

class SpiralPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Spiral')),
      body: TurtleView(
        commands: [
          PenDown(),
          SetColor((_) => Colors.green),
          Repeat((_) => 100, [
            Forward((i) => i * 2.0),
            Right((_) => 90),
          ]),
          PenUp(),
        ],
      ),
    );
  }
}

这个示例包含了两个页面，一个是绘制五角星的页面，另一个是绘制螺旋线的页面。你可以根据需要扩展更多的示例和功能。