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

上效果

对比一下vscode的效果：

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

上代码

import 'dart:async';import 'package:flutter/material.dart';
import 'package:logging/logging.dart';const String tag = 'MyDraggableViewDemo2';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;Timer? _timer;bool _isHovered = false;void _startTimer() {Logger(tag).info('_startTimer called!');_timer?.cancel();_timer = Timer(const Duration(seconds: 1), () {setState(() {_isHovered = true;Logger(tag).info('Mouse hovered for 2 second!');});});}void _cancelTimer() {Logger(tag).info('_cancelTimer called!');if (isResizing) {return;}_timer?.cancel();setState(() {_isHovered = false;});}@overrideWidget build(BuildContext context) {return Row(children: [// 使用 SizedBox 组件来指定左边的组件的宽度SizedBox(width: leftWidth,child: Container(color: Colors.blue,child: Center(child: Text('左侧菜单')),),),// 检测鼠标进入和离开事件MouseRegion(cursor: SystemMouseCursors.resizeLeftRight, // 设置鼠标形状为剪头onEnter: (event) {Logger(tag).info('onEnter called!');_startTimer();},onExit: (event) {Logger(tag).info('onExit called!');_cancelTimer();},child: // 使用 GestureDetector 组件来包裹分割线GestureDetector(onHorizontalDragStart: (details) => {setState(() {isResizing = true;})},// 监听水平方向的拖拽操作onHorizontalDragUpdate: (details) {// 获取拖拽的距离double delta = details.delta.dx;// 更新左边的组件的宽度leftWidth += delta;// 限制左边的组件的宽度在 0 到屏幕宽度之间leftWidth = leftWidth.clamp(0.0, MediaQuery.of(context).size.width);// 重绘组件setState(() {});},onHorizontalDragCancel: () => {setState(() {isResizing = false;})},onHorizontalDragEnd: (details) => {Logger(tag).info('onHorizontalDragEnd called!'),setState(() {isResizing = false;})},child: VerticalDivider(width: _isHovered ? 3 : 2,thickness: _isHovered ? 3 : 2,color: Colors.grey[_isHovered ? 100 : 700],),),),
// 使用 Expanded 组件来包裹右边的组件Expanded(child: Container(color: Colors.red,child: Center(child: Text('右侧工作区')),),),]);}
}

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