FlutterUnit TolyUI | 布局游乐场

theme: cyanosis

FlutterUnit 基于 TolyUI 大大简化了界面构建的代码复杂程度，因此之前想要实现的一些小功能，就可以轻松支持。布局游乐场是通过交互的方式来 直观体验 组件的布局特性，从而更易学和掌握。目前 FlutterUnit 已在知识集录模块新增了 布局宝库，大家可以更新代码查看 ~

1. 什么是布局游乐场

对于新手朋友，对有些较复杂的布局组件很难把握其特性。为此 FlutterUnit 设立了 布局宝库 模块，来帮助开发者更容易理解 Flutter 中的布局特性以及核心的布局组件。其中的 Playground 指的是可交互操作的组件展示面板，如下的 Flex Playground 将淋漓尽致地展示 Flex 组件布局特性。

Playground 实现过程中，依赖了很多 TolyUI 中的组件：

对于枚举类型的参数，通过 TolySelect 组件处理选择事件。
操作的图标按钮使用 TolyAction 组件。
布局宝库的侧栏导航，使用 TolyRailMenuTree 组件。

目前已经完成了 Flex、Wrap、Stack 三个多字布局的 Playground 。可以在操作面板中增加/删除，指定宽高的色块。来更好的体验组件的布局效果。

2. Flex Playground 功能实现 - 数据层

下面以 Flex Playground 来介绍一下功能实现。一个 Playground 主要包括两个区域：左侧的组件 效果展示区 和右侧的 操作面板区。其中右侧的交互操作会影响左侧的效果展示：

我们知道 Flutter 中，数据决定界面的表现，首先应该确定 Flex Playground 中依赖了哪些数据。当前功能是通过交互修改 Flex 组件的属性，所以 Flex 组件的属性内容是一份需要维护的状态。通过下面的 FlexAttr 类承载各个属性数据：

dart class FlexAttr { final Axis direction; final MainAxisAlignment mainAxisAlignment; final CrossAxisAlignment crossAxisAlignment; final MainAxisSize mainAxisSize; final TextDirection textDirection; final VerticalDirection verticalDirection; final TextBaseline textBaseline;

另外，需要若干个色块，它们有各自的宽度和高度，通过 DisplayItem 类承载相关数据：

dart class DisplayItem { final double width; final double height; final Color color;

这样 Flex Playground 中的状态数据就呼之欲出了：

[1] . DisplayItem 列表数据，记录色块信息。
[2]. _selectIndex 选中的色块索引，用于删除色块。
[3]. FlexAttr 数据，决定 Flex 组件的展示效果。

dart class _FlexPlaygroundState extends State<FlexPlayground> { List<DisplayItem> _data = []; late FlexAttr _attr; int _selectIndex = -1;

3. Flex Playground 功能实现 - 视图层

左侧的布局效果展示区封装为如下的 FlexDisplay 组件，依赖三个状态数据，通过 Flex 组件来构建展示内容。其中，

Flex 构造函数中的各个属性由 FlexAttr 数据提供；
children 组件由 List<DisplayItem> 数据映射得到；
色块的选中事件，通过 onSelectChanged 回调，交由使用者处理，更新激活索引。

```dart class FlexDisplay extends StatelessWidget { final List items; final FlexAttr attr; final int selectIndex; final ValueChanged onSelectChanged;

const FlexDisplay({ super.key, required this.items, required this.attr, required this.selectIndex, required this.onSelectChanged, });

@override Widget build(BuildContext context) { return Flex( direction: attr.direction, mainAxisAlignment: attr.mainAxisAlignment, crossAxisAlignment: attr.crossAxisAlignment, mainAxisSize: attr.mainAxisSize, textDirection: attr.textDirection, verticalDirection: attr.verticalDirection, textBaseline: TextBaseline.alphabetic, children: items.asMap().keys.map((int index) { bool active = selectIndex == index; return GestureDetector( onTap: () => onSelectChanged(index), child: DisplayPlayItem(item: items[index], selected: active), ); }).toList(), ); } } ```

右侧的操作面板需要支持交互操作，通过触发事件来更新状态数据，然后更新界面，即可实现我们期望的功能。Flex 组件的属性中有很多枚举值，这比较适合使用下拉选择来处理。Flutter 中自带的选择器在桌面端的体验效果并不是很好，于是 TolyUI 中提供了 TolySelect 组件，便于构建类似的选择功能：

右侧的面板通过 FlexOpTool 组件展示，其中添加、删除、重置的按钮事件，分别通过回调交由使用者处理。另外属性操作时数据的变化，也会通过 ValueChanged 通知外界进行数据处理。也就是说 FlexOpTool 本身并不参与状态数据的维护逻辑。只负责基于数据构建界面，以及数据变化时的回调通知：

dart class FlexOpTool extends StatefulWidget { final ValueChanged<Size> onAddBox; final VoidCallback onDelete; final VoidCallback onReset; final FlexAttr attr; final ValueChanged<FlexAttr> onAttrChange;

这里着重介绍一下选择器的使用， TolySelect 主要通过 String 列表 data 和激活索引 selectIndex 决定菜单项羽和激活项；通过 cellStyle 可以简单定制菜单项的展示效果。由于这里选择器的使用场合非常多，所以封装了 ItemSelector 组件统一处理标题、布局等效果：

```dart typedef NameCalc = String Function(T data);

class ItemSelector extends StatelessWidget { final int selectIndex; final List data; final NameCalc calcFun; final ValueChanged onSelect; final String label; final String subTitle;

const ItemSelector({ super.key, required this.selectIndex, required this.data, required this.calcFun, required this.onSelect, required this.subTitle, required this.label, });

@override Widget build(BuildContext context) { TextStyle labelStyle = const TextStyle(color: Color(0xff61666d), fontSize: 12); DropMenuCellStyle lightStyle = const DropMenuCellStyle( padding: EdgeInsets.symmetric(horizontal: 4,vertical: 1), borderRadius: BorderRadius.all(Radius.circular(6)), foregroundColor: Color(0xff1f1f1f), backgroundColor: Colors.transparent, disableColor: Color(0xffbfbfbf), hoverBackgroundColor: Color(0xfff5f5f5), hoverForegroundColor: Color(0xff1f1f1f), textStyle: TextStyle(fontSize: 11) ); return Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 6), child: Row( children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(label, style: labelStyle), Text(subTitle, style: labelStyle.copyWith(fontSize: 8)), ], ), const Spacer(), TolySelect( fontSize: 11, cellStyle: lightStyle, data: data.map((e) => calcFun(e)).toList(), selectIndex: selectIndex, iconSize: 16, height: 25, width: 110, maxHeight: 200, onSelected: (int index) => onSelect(data[index]), ) ], ), ); } } ```

4. Flex Playground 功能实现 - 数据逻辑层

FlexOpTool 提供了交互过程中数据变化的时机，使用者需要在对应的时机来维护状态数据的正确性。

如下所示，_onAddBox 方法，会在 DisplayItem 列表中增加一个色块，触发 setState 重新构建；_deleteSelectIndex 方法将移除对应索引的色块，并重新构建更新界面：

```dart void _onAddBox(Size size) { int index = _data.length + 1; Color color = kColors[index % kColors.length]; _data.add(DisplayItem(width: size.width, height: size.height, color: color)); setState(() {}); }

void deleteSelectIndex() { if (selectIndex < 0 || selectIndex >= _data.length) { $message.warning(message: '请先选择删除的色块!'); return; } _data.removeAt(selectIndex); _selectIndex = -1; setState(() {}); } ```

当属性数据变化，通过 _onAttrChange 方法更新 _attr 数据即可；重置回调时，将三个状态数据设为初始值：

```dart void _onAttrChange(FlexAttr attr) { setState(() { _attr = attr; }); }

void _reset({bool init=false}){ _attr = FlexAttr(direction: Axis.horizontal); _data = [ DisplayItem(width: 20, height: 20, color: kColors[0]), DisplayItem(width: 10, height: 80, color: kColors[1]), DisplayItem(width: 40, height: 30, color: kColors[2]), DisplayItem(width: 60, height: 20, color: kColors[3]), ]; _selectIndex = -1; if(init) return; setState(() {}); } ```

这就是 Flex Playground 功能的核心实现过程，紧紧把握 状态数据、组件构建、交互事件 和 数据维护 四个方面，就可以很轻松地完成任何功能需求。其他的 Playground 实现方式类似，就不一一介绍了，希望大家可以在 布局游乐场 中，通过交互的方式，学习更多知识。
以后，FlutterUnit 将在 TolyUI 的加持下，支持更多的好玩和使用的功能，敬请期待~