漯河北京网站建设,万网衡水网站备案,id注册网站,电子商务平台的运营方法FlutterUnit 基于 TolyUI 大大简化了界面构建的代码复杂程度#xff0c;因此之前想要实现的一些小功能#xff0c;就可以轻松支持。布局游乐场是通过交互的方式来 直观体验 组件的布局特性#xff0c;从而更易学和掌握。目前 FlutterUnit 已在 知识集录模块新增了 布局宝库因此之前想要实现的一些小功能就可以轻松支持。布局游乐场是通过交互的方式来 直观体验 组件的布局特性从而更易学和掌握。目前 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 类承载各个属性数据
class FlexAttr {final Axis direction;final MainAxisAlignment mainAxisAlignment;final CrossAxisAlignment crossAxisAlignment;final MainAxisSize mainAxisSize;final TextDirection textDirection;final VerticalDirection verticalDirection;final TextBaseline textBaseline;另外需要若干个色块它们有各自的宽度和高度通过 DisplayItem 类承载相关数据
class DisplayItem {final double width;final double height;final Color color;这样 Flex Playground 中的状态数据就呼之欲出了
[1] . DisplayItem 列表数据记录色块信息。[2]. _selectIndex 选中的色块索引用于删除色块。[3]. FlexAttr 数据决定 Flex 组件的展示效果。
class _FlexPlaygroundState extends StateFlexPlayground {ListDisplayItem _data [];late FlexAttr _attr;int _selectIndex -1;3. Flex Playground 功能实现 - 视图层
左侧的布局效果展示区封装为如下的 FlexDisplay 组件依赖三个状态数据通过 Flex 组件来构建展示内容。其中
Flex 构造函数中的各个属性由 FlexAttr 数据提供children 组件由 ListDisplayItem 数据映射得到色块的选中事件通过 onSelectChanged 回调交由使用者处理更新激活索引。 class FlexDisplay extends StatelessWidget {final ListDisplayItem items;final FlexAttr attr;final int selectIndex;final ValueChangedint onSelectChanged;const FlexDisplay({super.key,required this.items,required this.attr,required this.selectIndex,required this.onSelectChanged,});overrideWidget 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 本身并不参与状态数据的维护逻辑。只负责基于数据构建界面以及数据变化时的回调通知
class FlexOpTool extends StatefulWidget {final ValueChangedSize onAddBox;final VoidCallback onDelete;final VoidCallback onReset;final FlexAttr attr;final ValueChangedFlexAttr onAttrChange;这里着重介绍一下选择器的使用 TolySelect 主要通过 String 列表 data 和激活索引 selectIndex 决定菜单项羽和激活项通过 cellStyle 可以简单定制菜单项的展示效果。由于这里选择器的使用场合非常多所以封装了 ItemSelector 组件统一处理标题、布局等效果 typedef NameCalcT String Function(T data);class ItemSelectorT extends StatelessWidget {final int selectIndex;final ListT data;final NameCalcT calcFun;final ValueChangedT 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,});overrideWidget 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 方法将移除对应索引的色块并重新构建更新界面
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 数据即可重置回调时将三个状态数据设为初始值
void _onAttrChange(FlexAttr attr) {setState(() {_attr attr;});
}void _reset({bool initfalse}){_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 的加持下支持更多的好玩和使用的功能敬请期待~
