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> data
List<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> list
return 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(),
),
);
}
}