网站建设需网站114啦网址导航官网

【Flutter&Dart】 拖动改变 widget 的窗口尺寸大小GestureDetector～简单实现（10 /100）
【Flutter&Dart】 拖动边界线改变列宽并且有边界高亮和鼠标效果（12 /100）

上效果：

这个在知乎里找到的效果，感觉很不错就给抄过来实现一下。

上代码：

import 'package:flutter/material.dart';class MyDraggableViewDemo2 extends StatelessWidget {const MyDraggableViewDemo2({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('MyDraggableViewDemo2'),),body: DraggableDemo(),),);}
}class DraggableDemo extends StatefulWidget {const DraggableDemo({super.key});@overrideState<StatefulWidget> createState() {return _DraggableDemoState();}
}class _DraggableDemoState extends State<DraggableDemo> {double leftWidth = 100.0;double height = 200.0;bool isResizing = false;@overrideWidget build(BuildContext context) {return Row(children: [// 使用 SizedBox 组件来指定左边的组件的宽度SizedBox(width: leftWidth,child: Container(color: Colors.blue,child: Center(child: Text('左侧菜单')),),),// 使用 GestureDetector 组件来包裹分割线GestureDetector(// 监听水平方向的拖拽操作onHorizontalDragUpdate: (details) {// 获取拖拽的距离double delta = details.delta.dx;// 更新左边的组件的宽度leftWidth += delta;// 限制左边的组件的宽度在 0 到屏幕宽度之间leftWidth = leftWidth.clamp(0.0, MediaQuery.of(context).size.width);// 重绘组件setState(() {});},child: VerticalDivider(width: 16,thickness: 4,color: Colors.black,),),// 使用 Expanded 组件来包裹右边的组件Expanded(child: Container(color: Colors.red,child: Center(child: Text('右侧工作区')),),),]);}
}

功能上符合要求了，但是交互效果上还是需要在进行细微调整的
比如鼠标停留后的高亮分割线，感觉是停留超过两秒才出现的，滑过不会出现

还有左右可拖动的鼠标剪头等等

===========END