Flutter绘图工具插件flutter_painting_tools的使用

flutter_painting_tools 是一个简单的Flutter库，允许用户在屏幕上进行绘画。本文将介绍如何使用该插件，并提供完整的示例代码。

Getting Started

Painting Board

最基本的用法是在屏幕上显示一个用户可以绘制的简单画板。可以通过在代码中显示 PaintingBoard 来实现。

例如：

Center(
    child: PaintingBoard(
        boardHeight: 500,
        boardWidth: 300,
    ),
)

你可以根据需要自定义 PaintingBoard 的参数：

Painting Board Controller

设置控制器

如果你想执行高级任务，如使用不同颜色绘制、删除绘画等，你需要设置一个 PaintingBoardController。

1. 在 StatefulWidget 的状态中声明 PaintingBoardController：

   late final PaintingBoardController controller;
   

2. 在 StatefulWidget 的 initState() 方法中分配 PaintingBoardController：

   [@override](/user/override)
   void initState() {
       controller = PaintingBoardController();
       super.initState();
   }
   

3. 在 StatefulWidget 的 dispose() 方法中释放 PaintingBoardController：

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

4. 将 PaintingBoardController 传递给 PaintingBoard 的 controller 属性：

   PaintingBoard(
       controller: controller,
   )
   

使用多种颜色绘画

默认情况下，画笔的颜色是 Colors.black。如果想用不同的颜色绘画，可以使用 PaintingBoardController 的 changeBrushColor() 方法并传入你想要的颜色。

例如，当按钮被点击时更改画笔颜色：

ElevatedButton(
    onPressed: () {
        controller.changeBrushColor(Colors.blue);
    }
)

删除绘画

如果你想删除画板中的所有内容，可以调用 PaintingBoardController 的 deletePainting() 方法。

例如：

IconButton(
    onPressed: () => controller.deletePainting(),
    icon: const Icon(Icons.delete),
)

删除最后一条绘制的线

删除最后一条绘制的线非常简单，只需调用 PaintingBoardController 的 deleteLastLine() 方法。

例如：

IconButton(
    onPressed: () => controller.deleteLastLine(),
    icon: const Icon(Icons.undo_rounded),
)

Painting Color Bar

如果你想要一个简单的默认颜色选择栏，可以使用 PaintingColorBar 小部件。

以下是 PaintingColorBar 的一些属性：

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_painting_tools 插件：

import 'package:flutter/material.dart';
import 'package:flutter_painting_tools/flutter_painting_tools.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(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 声明控制器
  late final PaintingBoardController controller;

  [@override](/user/override)
  void initState() {
    // 初始化控制器
    controller = PaintingBoardController();
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    // 释放控制器
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
        actions: [
          IconButton(
            // 点击此按钮删除最后一条线
            onPressed: () => controller.deleteLastLine(),
            icon: const Icon(Icons.undo_rounded),
          ),
          IconButton(
            // 点击此按钮删除画板上的所有内容
            onPressed: () => controller.deletePainting(),
            icon: const Icon(Icons.delete),
          ),
        ],
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const SizedBox(height: 25),
          PaintingColorBar(
            controller: controller, // 使用之前定义的控制器
            paintingColorBarMargin: const EdgeInsets.symmetric(horizontal: 6),
            colorsType: ColorsType.material,
            onTap: (Color color) {
              // 处理按下颜色的逻辑，例如更改画笔颜色
              print('tapped color: $color');
              controller.changeBrushColor(color);
            },
          ),
          const SizedBox(height: 50),
          Center(
            // 使用 PaintingBoard
            child: PaintingBoard(
              boardHeight: 500,
              boardWidth: 300,
              controller: controller, // 使用控制器
            ),
          ),
        ],
      ),
    );
  }
}