做网站怎么制作,小规模公司做网站成本是什么,做苗木行业网站赚钱,建设钓鱼网站源码theme: cyanosis 1. FlutterUnit 更新#xff1a;排序算法可视化 排序算法可视化是用视图层表现出算法执行过程中排序的过程#xff0c;感谢 编程的平行世界 在 《十几种排序算法的可视化效果#xff0c;快来看看#xff01;#x1f440;》》 一文中提供的算法支持。我进行… theme: cyanosis 1. FlutterUnit 更新排序算法可视化 排序算法可视化是用视图层表现出算法执行过程中排序的过程感谢 编程的平行世界 在 《十几种排序算法的可视化效果快来看看》》 一文中提供的算法支持。我进行了一些代码和交互上的优化将其集成到了 FlutterUnit 中大家可以在 release v2.9.3 下载全平台应用查看体验 ~ 掘金目前已经支持插入视频了但目前支持西瓜视频。下面通过两个视频来看一下效果 移动端: 交互视频 jvideo 桌面端: 交互视频 jvideo 2. 交互界面介绍 在移动端排序算法可视化被放在 知识/可视排序 页签下左上角的绿色按钮点击后启动排序从而驱动数字列表数据变化更新主界面产生排序的动态效果。下拉可以展开排序算法列表选择对应的算法进行排序 | 标题 | | | --- | --- | | | | 在桌面端排序算法可视化先放在 可视排序 侧栏导航下以后可能会拓展其他的有趣案例。 另外排序有设置界面可以设置配置参数。 个数表示数据的数量每个数据对应主界面中的一个线条。 间隔时长是排序过程中每步间的停顿时间单位是微秒。 随机种子是随机数的种子不为 -1 的话相同的种子每次重置生成的随机数列表一致。便于比较不排序算法下同一组数据表现。 3. 项目的结构 这里核心代码新建了一个 algorithm 的包来单独维护其中 algorithm/sort 文件夹中盛放排序的具体算法。把它们分文件放置更便于阅读。 在 algorithm/data_scope 中用于维护界面中的数据在 algorithm/views 中处理视图组件的构建。 最后在 pubspec.yaml 中通过 path 引入本地的包就可以在主项目中使用 algorithm 包中的组件进行展示。比如下面在侧栏导航中添加一个 可视排序 的菜单栏对应 DeskSortPage 组件。 yaml algorithm: path: packages/algorithm 4. 代码实现细节算法方面 可视化排序的思路是在每次排序列表数据发生变化时通过回调来通知处理。这里定义 SortCallback 类型方便维护其返回 Futurevoid 对象可以回调排序过程中此时的列表数据。 dart typedef SortCallback Futurevoid Function(Listint dist); 拿冒泡排序来说定义 bubbleSort 函数传入待排序的数字列表每次循环完成出发 callback 通知调用者。比如想要放慢排序的过程每一步可以等待一定的时间也就是设置中的间隔微秒数。 dart ///冒泡排序 Futurevoid bubbleSort(Listint src, SortCallback callback) async{ //控制需要进行排序的次数。每一轮循环都会确定一个数字的最终位置。 for (int i 0; i src.length; i) { //遍历当前未排序的元素通过相邻的元素比较并交换位置来完成排序。 for (int j 0; j src.length - i - 1; j) { //如果 _numbers[j] 大于 _numbers[j 1]则交换它们的位置确保较大的元素移到右边。 if (src[j] src[j 1]) { int temp src[j]; src[j] src[j 1]; src[j 1] temp; } //实现一个延迟以便在ui上展示排序的动画效果 await callback(src); } } } 另外排序的函数结构都是一致的输入待排序列表与回调可以通过 typedef 定义一个排序函数类型 SortFunction dart typedef SortFunction Futurevoid Function(Listint src, SortCallback callback); 这样就可以维护排序的名称和排序函数间的映射关系 dart MapString, SortFunction sortFunctionMap { insertion: insertionSort, bubble: bubbleSort, cocktail: cocktailSort, comb: combSort, pigeonHole: pigeonHoleSort, shell: shellSort, selection: selectionSort, gnome: gnomeSort, cycle: cycleSort, heap: heapSort, quick: quickSort, merge: mergeSort, }; 5. 代码实现细节数据方面 数据方面的代码在 data_scope 包中这里排序界面中的数据有三大类 其一是待排序数字列表。 其二是配置的参数。 其三是排序状态。 配置参数包括四个通过 SortConfig 类维护: dart class SortConfig { final int count; // 列表数字数量 final int seed; // 随机数种子 final Duration duration; // 间隔时长 final String name; // 算法名称 SortConfig({ this.count 100, this.duration const Duration(microseconds: 1500), this.seed -1, this.name insertion, }); SortConfig copyWith({ int? count, int? seed, Duration? duration, String? name, }) SortConfig( count:count??this.count, seed:seed??this.seed, duration:duration??this.duration, name:name??this.name, ); } 排序状态通过 SortStatus 枚举定义 dart enum SortStatus{ none, // 未操作 sorting, // 排序中 sorted, // 排序完成 } 排序界面整体的数据状态通过 SortState 维护它继承自 ChangeNotifier可以在数据变化时调用 notifyListeners 通知监听者从而实现界面的更新。 SortState 调用 sort 方法触发排序会根据排序算法名从 sortFunctionMap 中拿到排序算法调用。每次回调时触发 notifyListeners 方法通知更新。 dart class SortState with ChangeNotifier{ SortState(){ reset(); } SortStatus status SortStatus.none; List data []; SortConfig _config SortConfig(); SortConfig get config _config; Random random Random(); set config(SortConfig config){ _config config; reset(); notifyListeners(); } void reset(){ data.clear(); status SortStatus.none; notifyListeners(); int count config.count; if(config.seed!-1){ random Random(config.seed); } for (int i 0; i count; i) { data.add(random.nextInt(1000)); } } void sort() async{ status SortStatus.sorting; notifyListeners(); SortFunction? sortFunction sortFunctionMap[config.name]; if(sortFunction!null){ await sortFunction(data,(arr) async { await Future.delayed(config.duration); notifyListeners(); }); } status SortStatus.sorted; notifyListeners(); } } 6. 代码实现细节界面方面 这里目前没有使用三方状态管理包而是通过 Flutter 内部的 InheritedNotifier 完成子树共享可监听数据的任务。 dart class SortStateScope extends InheritedNotifier { const SortStateScope({ required super.notifier, required super.child, super.key, }); static SortState of(BuildContext context) context.dependOnInheritedWidgetOfExactType ()!.notifier!; } 如果某个组件是数据的依赖者在可监听对象发生变化时会通知其更新。拿 SortButton 来说他需要依赖排序状态 SortStatus 数据来展示不同的图标或响应不同的事件。使用 SortStateScope.of(context) 相当于依赖了数据那么数据(SortState)在 notifyListeners 时就会通知 SortButton 进行重新构建这就是 InheritedNotifier 组件的功能。 | none | sorting |sorted | | --- | --- |--- | | | | dart class SortButton extends StatelessWidget { const SortButton({super.key}); override Widget build(BuildContext context) { SortState state SortStateScope.of(context); VoidCallback? action; IconData icon; Color color; switch (state.status) { case SortStatus.none: icon Icons.notstartedoutlined; color Colors.green; action state.sort; break; case SortStatus.sorting: icon Icons.stopcircleoutlined; color Colors.grey; action null; break; case SortStatus.sorted: icon Icons.refresh; color Colors.black; action state.reset; break; } return GestureDetector(onTap: action,child: Icon(icon,color: color,),
); } } 最后主体界面通过 CustomPainter 对数字列表进行绘制遍历数据根据数值大小绘制不同高度的线条。 dart class DataPainter extends CustomPainter { final List data; DataPainter({required this.data}); override void paint(Canvas canvas, Size size) { canvas.clipRect(Offset.zero size); double itemWidth size.width / data.length; Paint paint Paint();
paint.strokeWidth itemWidth;
paint.strokeCap StrokeCap.round;for (int i 0; i data.length; i) {int value data[i];if (value 1000 * .10) {paint.color Colors.blue.shade100;} else if (value 1000 * .20) {paint.color Colors.blue.shade200;} else if (value 1000 * .30) {paint.color Colors.blue.shade300;} else if (value 1000 * .40) {paint.color Colors.blue.shade400;} else if (value 1000 * .50) {paint.color Colors.blue.shade500;} else if (value 1000 * .60) {paint.color Colors.blue.shade600;} else if (value 1000 * .70) {paint.color Colors.blue.shade700;} else if (value 1000 * .80) {paint.color Colors.blue.shade800;} else if (value 1000 * .90) {paint.color Colors.blue.shade900;} else {paint.color const Color(0xFF011E51);}canvas.drawLine(Offset(i * itemWidth itemWidth / 2, 0),Offset(i * itemWidth itemWidth / 2,size.height * (value / 1000),),paint);
} } override bool shouldRepaint(covariant DataPainter oldDelegate) { return true; } } 整个核心的逻辑就是这些有兴趣的可以自己查阅 FlutterUnit 中的相关代码那么本文就到这里谢谢观看我们下次再见~
