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

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

在这里插入图片描述
鼠标放上去

主要代码

import 'package:flutter/material.dart';class CustomStack extends StatefulWidget {@override_CustomStack createState() => _CustomStack();
}class _CustomStack extends State<CustomStack> {var _value = 'vvvvvvv';var isbool = false;Future<void> _updateui() async {setState(() {});}@overrideWidget 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 {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('web鼠标监测事件'),),body: CustomStack(),),);}
}