【Flutter&Dart】 拖动边界限改变列宽并且有边界高亮和鼠标结果（12 /100） ...

【Flutter&Dart】 拖动改变 widget 的窗口尺寸巨细GestureDetector～简单实现（10 /100）
【Flutter&Dart】 拖动边界限改变列宽类似 vscode 那种拖动改变编辑框窗口巨细（11 /100）
上结果

对比一下vscode的结果：

基本到达交互结果了，就是丝滑度好像差一点点。这个有可能是相干参数没有调试好。后期看看能否改进改进
上代码

1. import 'dart:async';
3. import 'package:flutter/material.dart';
4. import 'package:logging/logging.dart';
6. const String tag = 'MyDraggableViewDemo2';
8. class MyDraggableViewDemo2 extends StatelessWidget {
9.   const MyDraggableViewDemo2({super.key});
11.   @override
12.   Widget build(BuildContext context) {
13.     return MaterialApp(
14.       home: Scaffold(
15.         appBar: AppBar(
16.           title: Text('MyDraggableViewDemo2'),
17.         ),
18.         body: DraggableDemo(),
19.       ),
20.     );
21.   }
22. }
24. class DraggableDemo extends StatefulWidget {
25.   const DraggableDemo({super.key});
27.   @override
28.   State<StatefulWidget> createState() {
29.     return _DraggableDemoState();
30.   }
31. }
33. class _DraggableDemoState extends State<DraggableDemo> {
34.   double leftWidth = 100.0;
35.   double height = 200.0;
36.   bool isResizing = false;
37.   Timer? _timer;
38.   bool _isHovered = false;
39.   void _startTimer() {
40.     Logger(tag).info('_startTimer called!');
41.     _timer?.cancel();
42.     _timer = Timer(const Duration(seconds: 1), () {
43.       setState(() {
44.         _isHovered = true;
45.         Logger(tag).info('Mouse hovered for 2 second!');
46.       });
47.     });
48.   }
50.   void _cancelTimer() {
51.     Logger(tag).info('_cancelTimer called!');
52.     if (isResizing) {
53.       return;
54.     }
55.     _timer?.cancel();
56.     setState(() {
57.       _isHovered = false;
58.     });
59.   }
61.   @override
62.   Widget build(BuildContext context) {
63.     return Row(children: [
64.       // 使用 SizedBox 组件来指定左边的组件的宽度
65.       SizedBox(
66.         width: leftWidth,
67.         child: Container(
68.           color: Colors.blue,
69.           child: Center(child: Text('左侧菜单')),
70.         ),
71.       ),
72.       // 检测鼠标进入和离开事件
73.       MouseRegion(
74.         cursor: SystemMouseCursors.resizeLeftRight, // 设置鼠标形状为剪头
75.         onEnter: (event) {
76.           Logger(tag).info('onEnter called!');
77.           _startTimer();
78.         },
79.         onExit: (event) {
80.           Logger(tag).info('onExit called!');
81.           _cancelTimer();
82.         },
83.         child: // 使用 GestureDetector 组件来包裹分割线
84.             GestureDetector(
85.           onHorizontalDragStart: (details) => {
86.             setState(() {
87.               isResizing = true;
88.             })
89.           },
90.           // 监听水平方向的拖拽操作
91.           onHorizontalDragUpdate: (details) {
92.             // 获取拖拽的距离
93.             double delta = details.delta.dx;
94.             // 更新左边的组件的宽度
95.             leftWidth += delta;
96.             // 限制左边的组件的宽度在 0 到屏幕宽度之间
97.             leftWidth = leftWidth.clamp(0.0, MediaQuery.of(context).size.width);
98.             // 重绘组件
99.             setState(() {});
100.           },
101.           onHorizontalDragCancel: () => {
102.             setState(() {
103.               isResizing = false;
104.             })
105.           },
106.           onHorizontalDragEnd: (details) => {
107.             Logger(tag).info('onHorizontalDragEnd called!'),
108.             setState(() {
109.               isResizing = false;
110.             })
111.           },
112.           child: VerticalDivider(
113.             width: _isHovered ? 3 : 2,
114.             thickness: _isHovered ? 3 : 2,
115.             color: Colors.grey[_isHovered ? 100 : 700],
116.           ),
117.         ),
118.       ),
119. // 使用 Expanded 组件来包裹右边的组件
120.       Expanded(
121.         child: Container(
122.           color: Colors.red,
123.           child: Center(child: Text('右侧工作区')),
124.         ),
125.       ),
126.     ]);
127.   }
128. }

复制代码

结果已经完成，也没啥好说的了，晚安
=========END

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。