news 2026/8/29 6:08:15

Flutter 实现一个容器内部元素可平移、缩放和旋转等功能(十一)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Flutter 实现一个容器内部元素可平移、缩放和旋转等功能(十一)

Flutter 实现一个容器内部元素可平移、缩放和旋转等功能(十一)

Flutter: 3.35.7

前面我们实现了网格辅助线等功能,拥有这些功能,我们就能很好的定位元素在容器内的位置。今天我们就主要实现元素层级的相关操作。

在我们之前的功能中,元素个数比较少,当元素个数达到一定数量后,肯定会存在覆盖的情况,我们无法保证需要操作的元素一定是在顶层,所以就需要对层级进行辅助控制。而且层级操作主要是针对当前选中的元素,所以在未选中元素的时候就不允许点击。

元素层级的控制主要分为如下几类:

  1. 操作当前选中元素的层级
  2. 选中点击坐标内的某个层级的元素,不至于一定要保证它在顶层也可选中进行操作

因为元素层级的操作涉及到几个,以开启按钮位置为基准定位展示,所以要使用到OverlayEntry,我们单独抽取结构:

import'package:flutter/material.dart';import'base_icon_button.dart';classLevelBarextendsStatefulWidget{constLevelBar({super.key,requiredthis.onChangeUsePosition,requiredthis.usePosition,requiredthis.disabled,});finalFunction()onChangeUsePosition;finalbool usePosition;finalbool disabled;@overrideState<LevelBar>createState()=>_LevelBarState();}class_LevelBarStateextendsState<LevelBar>{/// 用于获取定位信息finalGlobalKey_globalKey=GlobalKey();/// 容器OverlayEntry?_overlayEntry;/// 宽高定位信息用于定位容器double _barWidth=0;double _barHeight=0;double _barTop=0;double _barLeft=0;@overridevoiddidUpdateWidget(covariantLevelBaroldWidget){super.didUpdateWidget(oldWidget);// 当使用层级工具,展示,不使用,隐藏if(oldWidget.usePosition!=widget.usePosition){if(widget.usePosition==false){_hideLevelBar();}else{WidgetsBinding.instance.addPostFrameCallback((_){_showLevelBar();});}}}@overridevoiddispose(){_globalKey.currentState?.dispose();_hideLevelBar();super.dispose();}/// 隐藏层级工具栏void_hideLevelBar(){if(_overlayEntry!=null){_overlayEntry?.remove();_overlayEntry=null;}}/// 展示层级工具栏void_showLevelBar(){_getDimensions();_hideLevelBar();// 创建 OverlayEntry_overlayEntry=OverlayEntry(builder:(context)=>Positioned(top:_barHeight+_barTop,left:_barLeft-100+_barWidth/2,child:Material(borderRadius:BorderRadius.circular(10),child:Container(width:200,decoration:BoxDecoration(color:Color(0xFFF0F0F0),border:Border.all(color:Colors.blueAccent,width:2,),borderRadius:BorderRadius.circular(10),),child:Row(mainAxisAlignment:MainAxisAlignment.center,children:[BaseIconButton(iconSrc:'assets/images/icon_top.png',onPressed:(){},),BaseIconButton(iconSrc
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/27 17:59:37

IndexTTS-2实战对比:零样本音色克隆与传统TTS的GPU效率评测

IndexTTS-2实战对比&#xff1a;零样本音色克隆与传统TTS的GPU效率评测 1. 开箱即用的语音合成体验&#xff1a;Sambert多情感中文TTS镜像 你有没有遇到过这样的情况&#xff1a;想给一段产品介绍配上自然的人声&#xff0c;却卡在语音合成环节——要么声音太机械&#xff0c…

作者头像 李华
网站建设 2026/8/27 22:55:45

对比多个ASR模型后,我选择了科哥这个版本

对比多个ASR模型后&#xff0c;我选择了科哥这个版本 在语音识别&#xff08;ASR&#xff09;这条路上&#xff0c;我试过不下十种中文语音转文字方案&#xff1a;从开源社区的Whisper系列变体&#xff0c;到云厂商提供的API服务&#xff0c;再到本地部署的FunASR、WeNet、ESP…

作者头像 李华
网站建设 2026/8/26 10:18:35

Windows优化工具:Tiny11Builder系统镜像定制全攻略

Windows优化工具&#xff1a;Tiny11Builder系统镜像定制全攻略 【免费下载链接】tiny11builder Scripts to build a trimmed-down Windows 11 image. 项目地址: https://gitcode.com/GitHub_Trending/ti/tiny11builder 轻量级系统构建已成为现代PC用户提升性能的重要需求…

作者头像 李华
网站建设 2026/8/27 14:01:46

Qwen3-4B-Instruct-2507部署教程:3步完成GPU算力适配,快速上手指南

Qwen3-4B-Instruct-2507部署教程&#xff1a;3步完成GPU算力适配&#xff0c;快速上手指南 1. 这个模型到底能做什么 Qwen3-4B-Instruct-2507不是又一个“参数堆砌”的大模型&#xff0c;而是一个真正把能力落在实处的轻量级主力选手。它由阿里开源&#xff0c;定位非常清晰&…

作者头像 李华
网站建设 2026/8/29 5:47:48

颠覆式优化:RyTuneX如何引发Windows性能革命

颠覆式优化&#xff1a;RyTuneX如何引发Windows性能革命 【免费下载链接】RyTuneX An optimizer made using the WinUI 3 framework 项目地址: https://gitcode.com/gh_mirrors/ry/RyTuneX 在Windows系统优化领域&#xff0c;用户常常陷入"越优化越卡顿"的怪圈…

作者头像 李华
网站建设 2026/8/24 19:27:07

解锁5大网络分析能力:Npcap深度技术指南与实战应用

解锁5大网络分析能力&#xff1a;Npcap深度技术指南与实战应用 【免费下载链接】npcap Nmap Projects Windows packet capture and transmission library 项目地址: https://gitcode.com/gh_mirrors/np/npcap 在当今复杂的网络环境中&#xff0c;Windows平台下的网络流量…

作者头像 李华