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(() {});
  }

  @override
  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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('web鼠标监测事件'),
        ),
        body: CustomStack(),
      ),
    );
  }
}