Flutter 实现软鼠标

文章目录


前言

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});
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
        cursor: SystemMouseCursors.none,
        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: cursor ?? const Icon(Icons.mouse),
                ),
              ),
            ),
          ],
        ));
  }
}

三、使用示例

dart 复制代码
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SoftMouse(
            child: const SizedBox(),
          ),
        ),
      ),
    );
  }
}

效果预览


总结

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

相关推荐
ALLIN13 小时前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei13 小时前
Flutter 国际化
flutter
Dabei14 小时前
Flutter MQTT 通信文档
flutter
桃杬15 小时前
lvgl修改输入设备驱动使其支持鼠标右键、双击、滑轮...
计算机外设
Dabei17 小时前
Flutter 中实现 TCP 通信
flutter
孤鸿玉17 小时前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter
前端 贾公子19 小时前
《Vuejs设计与实现》第 16 章(解析器) 上
vue.js·flutter·ios
tangweiguo030519871 天前
Flutter 数据存储的四种核心方式 · 从 SharedPreferences 到 SQLite:Flutter 数据持久化终极整理
flutter
0wioiw01 天前
Flutter基础(②④事件回调与交互处理)
flutter
肥肥呀呀呀1 天前
flutter配置Android gradle kts 8.0 的打包名称
android·flutter