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

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

上效果:

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

上代码:

import 'package:flutter/material.dart';class MyDraggableViewDemo2 extends StatelessWidget {const MyDraggableViewDemo2({super.key});Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('MyDraggableViewDemo2'),),body: DraggableDemo(),),);}
}class DraggableDemo extends StatefulWidget {const DraggableDemo({super.key});State<StatefulWidget> createState() {return _DraggableDemoState();}
}class _DraggableDemoState extends State<DraggableDemo> {double leftWidth = 100.0;double height = 200.0;bool isResizing = false;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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/66634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

原型模式详解与实践

在软件开发的奇妙世界里&#xff0c;我们常常面临重复创建相似对象的任务。如果每次创建都要从头开始设置各种属性和状态&#xff0c;不仅繁琐&#xff0c;还可能降低效率。原型模式就像一位神奇的魔法师&#xff0c;为我们提供了一种通过复制现有对象来创建新对象的优雅方式。…

比较procfs 、 sysctl和Netlink

procfs 文件系统和 sysctl 的使用: procfs 文件系统(/proc) procfs 文件系统是 Linux 内核向用户空间暴露内核数据结构以及配置信息的一种方式。`procfs` 的挂载点是 /proc 目录,这个目录中的文件和目录呈现内核的运行状况和配置信息。通过读写这些文件,可以查看和控制内…

【Rust自学】11.1. 编写和运行测试

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.1.1. 什么是测试 在Rust里一个测试就是一个函数&#xff0c;它被用于验证非测试代码的功能是否和预期一致。 在一个测试的函数体里通…

数据分析思维(八):分析方法——RFM分析方法

数据分析并非只是简单的数据分析工具三板斧——Excel、SQL、Python&#xff0c;更重要的是数据分析思维。没有数据分析思维和业务知识&#xff0c;就算拿到一堆数据&#xff0c;也不知道如何下手。 推荐书本《数据分析思维——分析方法和业务知识》&#xff0c;本文内容就是提取…

有关Redis的相关概述

一、Redis概述 1.1 Redis简介 Redis是一个开源的高性能键值对数据库&#xff0c;使用C语言编写&#xff0c;支持多种数据结构&#xff0c;如字符串&#xff08;String&#xff09;、列表&#xff08;List&#xff09;、哈希&#xff08;Hash&#xff09;、集合&#xff08;Set…

_controller_validate

在 controller 中我们首先对所有的请求进行日志记录&#xff0c;身份校验&#xff0c;参数校验之后直接把过滤后的数据丢给 logic(serviceImpl) 。这样子一来 controller 只是充当了 路由 过滤器 的作用&#xff0c;如果之后修改 API &#xff0c;前端的请求地址不需要修改&am…

57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景

57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景 实现效果 该案例实现了使用Three.js创建一个带有聚光灯和旋转立方体的3D场景。 知识点 WebGLRenderer&#xff08;WebGL渲染器&#xff09; THREE.WebGLRenderer 是 Three.js 中用于将场景渲染为 WebGL 内容的核…

Idea-离线安装SonarLint插件地址

地址&#xff1a; SonarQube for IDE - IntelliJ IDEs Plugin | Marketplace 选择Install Plugin from Disk..&#xff0c;选中下载好的插件&#xff0c;然后重启idea

MyBatis面试-1

1、什么是MyBatis&#xff1f; MyBatis是一个半ORM框架(对象关系映射)。---》Hibernate全ORM框架 ---》基于JDBC封装的框架 专注于SQL语句&#xff0c;不用关心JDBC操作的其他流程 2、MyBatis有什么优点 基于SQL语句的编程&#xff0c;相对来说会更加的灵活和JDBC相比&#…

Unity:删除注册表内的项目记录

然后WinR按键输入regedit 打开注册表 在注册表 HKEY CURRENT USER—>SOFTWARE—>Unity—>UnityEditor—>DefaultCompany —>language_Test 中&#xff0c;删除我们的之前存储的语言环境数据。在 “ 三、文本调用和替换 ” 测试时已经将语言环境存储到注册表中了…

历代iPhone运行内存大小和电池容量信息

系列设备名称充电端口标配充电线PD快充无线充电 (W)标配充电器电池容量 (mAh)发布时间RAM运存iPhone 16iPhone 16 Pro MaxUSB Type-CUSB-C to USB-C支持25无47472024/9/108GB LPDDR5XiPhone 16 ProUSB Type-CUSB-C to USB-C支持25无35772024/9/108GB LPDDR5XiPhone 16 PlusUSB …

JAVA学习记录3

文章为个人学习记录&#xff0c;仅供参考&#xff0c;如有错误请指出。 上期说到使用记事本编写Java程序太过繁琐&#xff0c;所以我们后面都将使用IDEA进行代码的编写、编译和运行。 如何下载安装IDEA&#xff1f; 这个的下载途径也很多&#xff0c;我还是推荐去官网下载(h…

CSS——22.静态伪类(伪类是选择不同元素状态)

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>静态伪类</title> </head><body><a href"#">我爱学习</a></body> </html>单击链接前的样式 左键单击&#xff08;且…

如何在 Hive SQL 中处理复杂的数据类型?

目录 一、复杂数据类型简介 二、创建表时使用复杂数据类型 三、插入数据到复杂数据类型的表 四、查询复杂数据类型

Mysql 性能优化:索引条件下推(ICP)

MySQL 索引下推&#xff08;Index Condition Pushdown&#xff0c;ICP&#xff09;是一种查询优化技术&#xff0c;旨在提高使用索引的查询效率。它是在 MySQL 5.6 中引入的&#xff0c;通过将部分 WHERE 子句的过滤条件下推到索引扫描阶段来减少不必要的回表操作&#xff0c;从…

Linux 环境(Ubuntu)部署 Hadoop 环境

前置准备 准备三台机器 cat /etc/hosts 192.168.1.7 hadoop-master 192.168.1.11 hadoop-slave01 192.168.1.12 hadoop-slave02Linux 环境 cat /etc/os-release PRETTY_NAME"Ubuntu 24.10" NAME"Ubuntu" VERSION_ID"24.10" VERSION"24.…

IDEA中Maven依赖包导入失败报红的潜在原因

在上网试了别人的八个问题总结之后依然没有解决&#xff1a; IDEA中Maven依赖包导入失败报红问题总结最有效8种解决方案_idea导入依赖还是报红-CSDN博客https://blog.csdn.net/qq_43705131/article/details/106165960 江郎才尽之后突然想到一个原因&#xff1a;<dep…

JavaScrip中对于数组的操作的方法(!!是否改变原数组)

1. push() 功能&#xff1a;向数组的末尾添加一个或多个元素&#xff0c;并返回新数组的长度。&#xff08;改变原数组&#xff09;示例&#xff1a; let arr [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] 2. pop() 功能&#xff1a;移除数组的最后一个元素&#xff0c;并返回…

C语言基本知识复习浓缩版:标识符、函数、进制、数据类型

C语言基本知识复习浓缩版&#xff1a;标识符、函数、进制、数据类型 【c语言期末复习3小时速成【完整全集】期末速成含考试题c语言期末速成突击复习C语言补考C语言期末大一】 B站看到的复习C语言视频&#xff0c;感觉非常棒&#xff0c;就跟着进行了一下学习。众所周知&#…

GMDH自组织网络模型时间序列预测,可预测未来

GMDH自组织网络模型时间序列预测&#xff0c;可预测未来 目录 GMDH自组织网络模型时间序列预测&#xff0c;可预测未来效果一览基本介绍模型构建程序设计学习总结参考资料 效果一览 基本介绍 GMDH自组织网络模型是自组织数据挖掘中的一种模型方法&#xff0c;是基于计算机科学和…