Flutter 像素编辑器#02 | 配置编辑

最新推荐文章于 2024-12-10 11:44:58 发布

张风捷特烈

最新推荐文章于 2024-12-10 11:44:58 发布

阅读量1k

点赞数 18

文章标签： flutter 编辑器

本文链接：https://blog.youkuaiyun.com/qq_30447263/article/details/137879119

版权

theme: cyanosis

本系列，将通过 Flutter 实现一个全平台的像素编辑器应用。源码见开源项目【pix_editor】

《Flutter 像素编辑器#01 | 像素网格》

上一篇完成了 Flutter 像素编辑器的点击交互，绘制像素。本篇继续完善像素编辑器，划分布局区域，并运行修改项目和画笔的配置。如下所示，是 Flutter 像素编辑器的第二版：

jvideo

1. Flutter 像素编辑器布局结构

在桌面端中，第二版将应用划分为五个区域：

顶部菜单栏 MenuToolBar ：放置菜单以及操作按钮。
左侧编辑工具 ToolBar : 放置编辑按钮。
右侧操作面板 OperationArea : 放置配置操作的内容。
底部信息栏 BottomBar : 展示信息。
中间绘制区 EditorArea ：交互绘制像素的区域。

通过行列布局，结合 Expanded 组件，可以是中间的 EditorArea 绘制区大小自适应窗口。

```dart class PixEditorPage extends StatelessWidget { const PixEditorPage({super.key});

@override Widget build(BuildContext context) { return const Scaffold( backgroundColor: Colors.white, body: Column( children: [ MenuToolBar(), Expanded( child: Row( children: [ ToolBar(), Expanded(child: Column( children: [Expanded(child: EditorArea()), BottomBar()] )), OperationArea() ], )), ], ), ); } } ```

目前 BottomBar、MenuToolBar、ToolBar 三个区域只是简单展示一下，具体功能后续完善。本篇主要着重介绍 OperationArea 操作区，如何影响 EditorArea 绘图区。

2、数据变化的业务逻辑

OperationArea 操作区在编辑时，绘图区的内容需要实时变化。比如下面修改网格的数量，输入过程中绘图区的个数会相对改变：

所以需要数据的变化可以通知画板进行更新。这里定义 ProjectConfigLogic 类维护配置状态数据，混入 ChangeNotifier 拥有通知监听的能力。其中主要维护 PixEditorConfig 配置数据，并提供一些方法，来修改某个维度的数据。数据变化后通过 notifyListeners 通知更新：

```dart class ProjectConfigLogic with ChangeNotifier {

late TextEditingController rowCtrl = TextEditingController(text: config.row.toString()); late TextEditingController columnCtrl = TextEditingController(text: config.column.toString());

@override void dispose() { rowCtrl.dispose(); columnCtrl.dispose(); super.dispose(); }

PixEditorConfig _config = PixEditorConfig( column: 5, row: 5, name: "新建文件", backgroundColor: const Color(0xfff0f0f0), gridColor: Colors.white, showGrid: true, );

PixEditorConfig get config => _config;

set config(PixEditorConfig config){ _config = config; notifyListeners(); }

void updateRow(int row){ rowCtrl.text = row.toString(); config = _config.copyWith(row: row); } void updateBackgroundColor(Color color){ config = _config.copyWith(backgroundColor: color); } void updateGridColor(Color color) { config = _config.copyWith(gridColor: color); }

void updateColumn(int column){ columnCtrl.text = column.toString(); config = _config.copyWith(column: column); }

void toggleShowGrid(){ config = config.copyWith(showGrid: !config.showGrid); } } ```

3、项目配置的状态数据管理

接下来就需要访问 ProjectConfigLogic 的数据进行界面构建，并触发其方法，修改数据触发更新。这里拿是否展示网格的这条功能需求，介绍一下如何处理：

目前功能并不是很复杂，使用 Flutter 内置的 InheritedNotifier 来共享 ProjectConfigLogic 即可。后面功能复杂之后，再考虑使用状态管理的库，来维护 ProjectConfigLogic 的功能。如下所示，定义 ProjectConfigScope 向子树提供状态数据：

```dart class ProjectConfigScope extends InheritedNotifier { const ProjectConfigScope({ required super.notifier, required super.child, super.key, });

static ProjectConfigLogic of(BuildContext context) => context.dependOnInheritedWidgetOfExactType ()!.notifier!;

static ProjectConfigLogic read(BuildContext context) => context.getInheritedWidgetOfExactType ()!.notifier!; } ```

然后再需要共享数据组件们的上层嵌套 ProjectConfigScope，来达到向子树共享数据的目的：

ps：之前在《 Flutter 组件集录 | InheritedNotifier 内置状态管理组件》一文中介绍过 InheritedNotifier 的使用。

这样，下层的组件可以通过 ProjectConfigScope.of(context) 根据上下文得到 ProjectConfigLogic 业务逻辑对象。对于是否显示网格来说 Checkbox 的 value 可以访问 configLogic 中的数据；点击事件 onChanged 中，通过 configLogic 对象触发 toggleShowGrid 方法，修改是否展示网格的配置数据，并触发更新：

```dart ProjectConfigLogic configLogic = ProjectConfigScope.of(context);

Row( children: [ Text("显示网格", style: TextStyle(fontSize: 12)), const SizedBox(width: 8), Container( width: 20, height: 20, child: Checkbox( value: configLogic.config.showGrid, onChanged: (bool? value) { configLogic.toggleShowGrid(); }, ), ) ], ), ```

其他的配置项数据的修改同理。

4、绘制信息的状态数据管理

绘制信息中目前增加了画笔的颜色，我们也可以通过业务逻辑层，来封装绘制方面的状态数据。如下定义 PixPaintLogic 来维护像素点列表 _pixCells，以及画笔颜色 _paintColor。这样命中像素点数据变化逻辑，就可以写在 PixPaintLogic 中。

```dart class PixPaintLogic with ChangeNotifier { final List _pixCells = [];

List get pixCells => _pixCells;

Color get paintColor => _paintColor;

set paintColor(Color value){ _paintColor = value; notifyListeners(); }

Color _paintColor = const Color(0xff5ec8f8);

// 命中像素点 void hitPix(int x,int y) { bool hasPix = _pixCells.where((e) => e.position == (x, y)).isNotEmpty; if (hasPix) { _pixCells.removeWhere((e) => e.position == (x, y)); } else { _pixCells.add(PixCell(color: _paintColor, position: (x,y))); } notifyListeners(); } } ```

同理，提供 PixPaintScope 向子树共享 PixPaintLogic 业务逻辑对象：