【Flutter&Dart】 拖动边界线改变列宽类似 vscode 那种拖动改变编辑框窗口大小(11 /100)

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

上效果:

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

上代码:

dart 复制代码
import 'package:flutter/material.dart';

class MyDraggableViewDemo2 extends StatelessWidget {
  const MyDraggableViewDemo2({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyDraggableViewDemo2'),
        ),
        body: DraggableDemo(),
      ),
    );
  }
}

class DraggableDemo extends StatefulWidget {
  const DraggableDemo({super.key});

  @override
  State<StatefulWidget> createState() {
    return _DraggableDemoState();
  }
}

class _DraggableDemoState extends State<DraggableDemo> {
  double leftWidth = 100.0;
  double height = 200.0;
  bool isResizing = false;

  @override
  Widget 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

相关推荐
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
2501_915918414 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
wen's5 小时前
React Native安卓刘海屏适配终极方案:仅需修改 AndroidManifest.xml!
android·xml·react native
编程乐学6 小时前
网络资源模板--基于Android Studio 实现的聊天App
android·android studio·大作业·移动端开发·安卓移动开发·聊天app
没有了遇见8 小时前
Android 通过 SO 库安全存储敏感数据,解决接口劫持问题
android
hsx6668 小时前
使用一个 RecyclerView 构建复杂多类型布局
android
hsx6668 小时前
利用 onMeasure、onLayout、onDraw 创建自定义 View
android
合作小小程序员小小店8 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
守城小轩8 小时前
Chromium 136 编译指南 - Android 篇:开发工具安装(三)
android·数据库·redis
whysqwhw9 小时前
OkHttp平台抽象机制分析
android