Flutter 实现软鼠标

embedded/2024/9/23 4:36:19/

文章目录

  • 前言
  • 一、如何实现?
    • 1、记录鼠标偏移
    • 2、MouseRegion获取偏移
    • 3、Transform移动图标
  • 二、完整代码
  • 三、使用示例
  • 总结


前言

flutter在嵌入式系统中运行时,有可能遇到drm鼠标无法使用的情况,但鼠标事件却可以正常接收,此时如果有软鼠标,就可以一定程度解决问题。本文提供了一个软鼠标的简单实现,主要适用于无法使用硬鼠标的场景


一、如何实现?

1、记录鼠标偏移

dart">final _offset = ValueNotifier<Offset>(Offset.zero);

2、MouseRegion获取偏移

dart">MouseRegion(onHover: (event) {_offset.value = event.position;},)

3、Transform移动图标

dart">ValueListenableBuilder(valueListenable: _offset,builder: (context, value, child) => Transform.translate(offset: value,))

二、完整代码

dart">import 'package:flutter/material.dart';class SoftMouse extends StatelessWidget {final _offset = ValueNotifier<Offset>(Offset.zero);final Widget child;final Widget? cursor;SoftMouse({super.key, required this.child, this.cursor});Widget build(BuildContext context) {return Listener(onPointerMove: (event) {_offset.value = event.position;},child: MouseRegion(cursor: SystemMouseCursors.none,hitTestBehavior: HitTestBehavior.opaque,onHover: (event) {_offset.value = event.position;},child: Stack(children: [child,ValueListenableBuilder(valueListenable: _offset,builder: (context, value, child) => Transform.translate(offset: value,child: Align(alignment: Alignment.topLeft,child: IgnorePointer(child: cursor ?? const Icon(Icons.mouse),),),),),],),),);}
}

三、使用示例

dart">class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Center(child: SoftMouse(child: const SizedBox(),),),),);}
}

效果预览

在这里插入图片描述


总结

以上就是今天要讲的内容,本文实现的软鼠标还是比较简单的,当然软鼠标对性能还是有一定的影响的,比如在linux中,每次移动都会触发交换缓存进行drm显示。


http://www.ppmy.cn/embedded/50927.html

相关文章

C#.net6.0语言+前端Vue,Ant-Design开发的智慧医院手术室麻醉管理平台源码 什么是手术麻醉临床信息管理系统?

C#.net6.0语言前端Vue,Ant-Design开发的智慧医院手术室麻醉管理平台源码 什么是手术麻醉临床信息管理系统&#xff1f; 手术麻醉临床信息管理系统涵盖了手术进程管理、自动排班、手术记录、术前评估与麻醉记录等功能&#xff0c;强调了系统如何通过技术架构和数据集成提高工作…

HTML5的未来:掌握最新技术,打造炫酷网页体验

引言 随着互联网技术的飞速发展&#xff0c;HTML5已经成为构建现代网页和应用的核心技术之一。HTML5不仅提供了丰富的语义化标签&#xff0c;还引入了多项前沿技术&#xff0c;使得网页体验更加丰富多彩。本文将探讨HTML5的最新技术&#xff0c;并结合行业实践&#xff0c;提供…

Linux系统编程——网络编程

目录 一、对于Socket、TCP/UDP、端口号的认知&#xff1a; 1.1 什么是Socket&#xff1a; 1.2 TCP/UDP对比&#xff1a; 1.3 端口号的作用&#xff1a; 二、字节序 2.1 字节序相关概念&#xff1a; 2.2 为什么会有字节序&#xff1a; 2.3 主机字节序转换成网络字节序函数…

2786. 访问数组中的位置使分数最大 Medium

给你一个下标从 0 开始的整数数组 nums 和一个正整数 x 。 你 一开始 在数组的位置 0 处&#xff0c;你可以按照下述规则访问数组中的其他位置&#xff1a; 如果你当前在位置 i &#xff0c;那么你可以移动到满足 i < j 的 任意 位置 j 。 对于你访问的位置 i &#xff0c;…

【ARMv8/ARMv9 硬件加速系列 3.3 -- SVE LD2D 和 ST2D 使用介绍】

文章目录 SVE 多向量操作LD2D(加载)LD2D 操作说明LD2D 使用举例ST2D(存储)ST2D 使用举例ST2D 存储示例代码ld2d 和 st2d 小结SVE 多向量操作 在ARMv8/9的SVE (Scalable Vector Extension) 指令集中,st2d和ld2d指令用于向量化的存储和加载操作,具体地,它们允许同时对两个…

centos7 离线安装zip和unzip

解压的时候发现不能解压&#xff0c;报-bash: unzip: command not found 1、访问https://www.rpmfind.net/linux/rpm2html/search.php?queryzip&submitSearch…&systemcentos&arch#/ 2、输入zip和centos搜索&#xff0c;选择el7下载 3、输入unzip和centos搜索&am…

人工智能在气象预报领域的崛起:GraphCast引领新纪元

最近&#xff0c;谷歌推出的天气预测大模型GraphCast在全球范围内引起了广泛关注&#xff0c;其卓越的表现不仅刷新了人们对AI能力的认知&#xff0c;更预示着传统天气预报工作模式的深刻变革。 GraphCast是一款基于机器学习技术的天气预测工具&#xff0c;它通过深度学习和大数…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 任务安排问题(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 📎在线评测链接 https://app5938.acapp.acwing.com.cn/contest/2/problem/OD…