flutter中鼠标检测事件的应用---主要在于网页端使用

flutter中鼠标检测事件的应用—主要在于网页端使用

在这里插入图片描述
鼠标放上去
在这里插入图片描述
主要代码

import 'package:flutter/material.dart';class CustomStack extends StatefulWidget {_CustomStack createState() => _CustomStack();
}class _CustomStack extends State<CustomStack> {var _value = 'vvvvvvv';var isbool = false;Future<void> _updateui() async {setState(() {});}Widget build(BuildContext context) {return Stack(children: <Widget>[// 背景层,可以是图片或者颜色// Positioned.fill(//   child: ColoredBox(//     color: Colors.white,//   ),// ),Positioned(top: 0,left: 0,right: 0,height: 60,child: Row(mainAxisSize: MainAxisSize.max,crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [const Text('前面'),_build3(),const Text('后面',)],),),if (isbool) _positioned(_value),/* Positioned(top: 60,left: 0,right: 0,child: _build2(),),*/]);}///原始类Widget _build2() {//List<String> dataList<String> data = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];return Container(height: 100,child: ListView(reverse: true,shrinkWrap: true,scrollDirection: Axis.horizontal,children: data.map((str) => MouseRegion(onEnter: (event) {print('鼠标进入 $str');_value = str;isbool = true;_updateui();///鼠标进入},onExit: (event) {print('鼠标离开 $str');_value = str;isbool = false;_updateui();///鼠标离开},child: Container(alignment: Alignment.center,width: 70,//color: color,child: Text('${str}',style: TextStyle(color: Colors.blue,// shadows: [//   Shadow(//       color: Colors.black,//       offset: Offset(.5, .5),//       blurRadius: 2)// ],///阴影),),),),).toList(),),);}///修改类Widget _build3() {List<String> data = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];return Container(height: 100,child: ListView(reverse: false, //正反输出shrinkWrap: true,scrollDirection: Axis.horizontal,children: data.asMap().entries.map((entry) {int index = entry.key; // 获取当前项的索引String str = entry.value; // 获取当前项的值return MouseRegion(onEnter: (event) {print('鼠标进入 ${str}(索引:$index)');// 在这里您可以根据索引来执行不同的操作_value = str;isbool = true;_updateui();},onExit: (event) {print('鼠标离开 ${str}(索引:$index)');// 在这里您也可以根据索引来执行不同的操作_value = str;isbool = false;_updateui();},child: Container(alignment: Alignment.center,width: 70,child: Text('${str}',style: TextStyle(color: Colors.blue,),),),);}).toList(),),);}Widget _positioned(String s) {//print('$string');return Positioned(top: 60,left: 0,right: 0,child: MouseRegion(onEnter: (event) {print('开启弹窗');isbool = true;_updateui();///鼠标进入},onExit: (event) {print('关闭弹窗');isbool = false;_updateui();///鼠标离开},child: Row(mainAxisSize: MainAxisSize.max,crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Text('${s}'),Text('${s}'),Text('${s}',style: TextStyle(color: Colors.blue),)],),),);}Widget _build() {//List<String> listreturn Row(mainAxisSize: MainAxisSize.max,crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,///中分spaceBetween   均匀分开children: [Text('data'), Text('data'), Text('data')],);}
}

使用

void main() {//runApp(MyStack());runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('web鼠标监测事件'),),body: CustomStack(),),);}
}

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

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

相关文章

c++中的内联函数和空指针

在C语言中我们学到了宏和宏函数&#xff0c;宏对于类型没有严格的限制&#xff0c;而且不需要建立栈帧&#xff0c;可以提高运行效率&#xff0c;但是宏不能进行调试&#xff0c;容易出错&#xff0c;而且没有类型检查。 为了补C语言中的坑&#xff0c;c中出现了内联函数inlin…

阿里云优惠券是什么?有什么用?如何领取?

阿里云作为国内领先的云计算服务提供商&#xff0c;为广大用户提供了高效、稳定、安全的云服务。为了帮助用户更好地使用阿里云&#xff0c;降低用户的成本&#xff0c;阿里云推出了优惠券活动。本文将为大家详细介绍阿里云优惠券是什么、有什么用以及如何领取。 一、阿里云优惠…

HTML 入门 ( 一 )

HTML文档创建 首先创建一个txt文本文档 修改文件后缀 HTML标签 标签结构 标签又称为元素,是HTML的基本组成单位分为: 双标签与单标签推荐小写标签名 结构: 双标签示例代码: <marquee> My name is Kvein. </marquee>单标签示例代码: <input>标签的并列与嵌…

测试接口时出现HttpMessageNotReadableException: Required request body is missing

问题 测试接口时出现org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing异常 原因 发送请求时没有传参数 解决办法 第一种方式: 传个参数 第二种方式&#xff1a;给个空的JSON

教你们如何用html+css做出漂亮的表格

这个HTML文档定义了一个简单的网页&#xff0c;主要用于展示一个群聊信息的表格。以下是关于这个表格的详细介绍&#xff1a; 基本结构&#xff1a; 文档以<!DOCTYPE html>开始&#xff0c;这是HTML5的文档类型声明。<html>标签是HTML文档的根元素。<head>部…

QA测试开发工程师面试题满分问答12: 用户上传照片如何设计测试用例并进行测试

针对用户上传照片的功能&#xff0c;以下是一些从 QA 角度设计测试用例的示例&#xff0c;涵盖了前端功能点、后端功能点、缓存、异常处理、资源占用、并发和网络等维度&#xff1a; 前端功能点&#xff1a; a. 用户界面&#xff1a;验证上传照片的用户界面是否易于使用和导航&…

centos 7 sshd服务无法自动随机启动

centos 7 sshd 服务无法伴随主机启动而启动&#xff0c;而使用systemctl start sshd可以启动&#xff0c;很奇怪。 后来使用Kimi查询&#xff0c;有提示“检查系统启动服务的顺序和状态” systemctl list-dependencies <service>确保所有依赖服务都已正常启动。 查看本…

python--正则表达式,元字符,反义符,转义符,位数问题

正则表达式&#xff08;regular expression&#xff09;&#xff1a; 为什么使用正则表达式&#xff1a; 在软件开发过程中&#xff0c;经常会涉及到大量的关键字等各种字符串的操作&#xff0c;使用正则表达式能很大程度的简化开发的复杂度和开发的效率&#xff0c;所以pytho…

福州装修|福机新苑 105m² 3室2厅2卫,奶油原木风。福州中宅装饰,福州装修

设计亮点 设计理念&#xff1a; 该方案意为在黄白之间&#xff0c;其色半出而不是全显现。 方案简介&#xff1a; 本案例的业主追求自然、舒适、温暖的装修效果&#xff0c;意向是打造出自然质朴的室内环境&#xff0c;让人能感受到回归自然的平和感和舒适感。 玄关 步入玄关&…

DC-2渗透测试复现

DC-2渗透测试复现 目的&#xff1a; 获取最高权限以及5个flag 过程&#xff1a; 信息打点-ssh连接-git提权 环境&#xff1a; 攻击机&#xff1a;kali(192.168.85.136) 靶机&#xff1a;DC_2(192.168.85.132) 复现&#xff1a; 一.信息收集 nmap -sP 192.168.85.0/24 …

Visual Studio Code 终端为管理员权限

第一部 1、 Visual Studio Code 快捷方式启动选项加上管理员启动 第二步 管理员方式运行 powershell Windows 10的任务栏自带了搜索。或者开始菜单选搜索只需在搜索框中输入powershell。 在出来的搜索结果中右击Windows PowerShell&#xff0c;然后选择以管理员方式运行。 执…

matlab使用教程(42)—常见的二维图像绘制方法

这个博客用于演示如何在 MATLAB 中创建曲线图、条形图、阶梯图、误差条形图、极坐标图、针状图、散点图。 1.曲线图 plot 函数用来创建 x 和 y 值的简单线图。 x 0:0.05:5; y sin(x.^2); figure plot(x,y) 运行结果&#xff1a; 线图可显示多组 x 和 y 数据。 x 0:0.05:…