当前位置：首页 > news >正文

【FlutterDart】拖动边界线改变列宽类似 vscode 那种拖动改变编辑框窗口大小（11 /100）

news 2025/7/19 1:22:31

【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('右侧工作区')),),),]);}
}