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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL——创建和插入

一、插入数据 INSERT 使用建议; 在任何情况下建议列出列名&#xff0c;在 VALUES 中插入值时&#xff0c;注意值和列的意义对应关系 values 指定的值顺序非常重要&#xff0c;决定了值是否被保存到正确的列中 在指定了列名的情况下&#xff0c;你可以仅对需要插入的列给到…

C++——StackQueue

目录 一Stack 1介绍 2接口 3模拟实现 4栈的oj题 二Queue 1介绍 2接口 3模拟实现 三容器适配器 1再谈栈和队列 四优先级队列 1接口 ​编辑 2仿函数 五dequeue的简单介绍 一Stack 1介绍 先来看看库中对栈的介绍&#xff1a; 1. stack是一种容器适配器&#x…

自养号测评技术:如何快速提高亚马逊、速卖通、沃尔玛新号的权重?

亚马逊平台高度关注买家账号权重&#xff0c;对于希望快速提升listing曝光与销量的卖家而言&#xff0c;拥有高权重买家账号进行下单至关重要。前提是&#xff0c;确保您的listing已经过精细优化。当前&#xff0c;市场上存在众多自养号服务商&#xff0c;然而由于多种原因&…

外汇兑换问题的最优子结构分析

外汇兑换问题的最优子结构分析 一、 当所有交易佣金为零时1.1 伪代码示例&#xff1a;1.2 C代码示例 二、 佣金不为零时的最优子结构性质三、 结论 在考虑外汇兑换问题时&#xff0c;我们面临的是如何通过一系列兑换操作&#xff0c;以最小的成本将一种货币转换为另一种货币。这…

网络变压器(网络隔离变压器)是如何影响网通设备的传输速率的呢?

Hqst华轩盛(石门盈盛)电子导读&#xff1a;今天介绍网络变压器&#xff08;网络隔离变压器/网络滤波器&#xff09;是如何影响网通设备的传输速率的 一、网络变压器&#xff08;网络隔离变压器/网络滤波器&#xff09;的工作原理 网络变压器&#xff08;网络隔离变压器/网络滤…

Docker 学习笔记(六):挑战容器数据卷技术一文通,实战多个 MySQL 数据同步,能懂会用,初学必备

一、前言 记录时间 [2024-4-11] 系列文章简摘&#xff1a; Docker学习笔记&#xff08;二&#xff09;&#xff1a;在Linux中部署Docker&#xff08;Centos7下安装docker、环境配置&#xff0c;以及镜像简单使用&#xff09; Docker 学习笔记&#xff08;三&#xff09;&#x…

arm-linux-gnueabihf-gcc默认目录

默认编译的头文件目录&#xff1a; /usr/local/arm/gcc-linaro-4.9.4-2017.01-x86_64_arm-linux-gnueabihf/arm-linux-gnueabihf/lib 默认编译的库文件目录&#xff1a; /usr/local/arm/gcc-linaro-4.9.4-2017.01-x86_64_arm-linux-gnueabihf/arm-linux-gnueabihf/include/ …

校招生如何准备软件测试、测试开发岗位的面试?

校招生如何准备软件测试、测试开发岗位的面试&#xff1f; 求职建议 大家都很困惑如何学习测试&#xff1f;如何准备测试方面的面试&#xff1f; 我有朋友是做研发的&#xff0c;他认为测试不用准备&#xff0c;直接用开发的简历就行。也有人认为要学习一些测试理论&#xf…

使用 create-vue 脚手架工具创建一个基于 Vite 的项目,并包含加入 Vue Router 等可选项

如果你打算启动一个新项目&#xff0c;你可能会发现使用 create-vue 这个脚手架工具更容易&#xff0c;它能创建一个基于 Vite 的项目&#xff0c;并包含加入 Vue Router 的选项&#xff0c;指令如下&#xff1a; // npm npm create vuelatest// yarn yarn create vue// pnpm …

HTML、CSS --javaweb学习笔记

记录一些重要的知识点 CSS引入方式 行内样式&#xff1a;<h1 style"...">内嵌样式&#xff1a;<style>…</style>外联样式&#xff1a;xxx.css <link href"..."> 颜色表示 关键字&#xff1a;red、green.......rgb表示法&…

java快速构建飞书API消息推送、消息加急等功能

文章目录 飞书机器人自定义机器人自定义应用机器人 自定义应用发送消息普通文本 text富文本 post图片 image文件 file语音 audio视频 media消息卡片 interactive分享群名片 share_chat分享个人名片 share_user 批量发送消息消息加急发送应用内加急发送短信加急 发送电话加急spr…

【随身wifi京东金榜排名】格行vs华为vs上赞随身wifi哪款最好用?格行随身wifi官方正品,格行随身wifi怎么样?

第一名&#xff1a;格行随身wifi 综合分99.1 随身WiFi行业领跑品牌 &#xff0c;15年行业经验 &#xff0c;随身WiFi口碑榜第一名。轻便小巧&#xff0c;支持三网通&#xff0c;可以随时随地提供稳定高速的网络连接。使用目前先进的马维尔芯片&#xff0c;信号稳定&#xff0…

Unet++(pytorch实现)

Unet++网络 Dense connection Unet++继承了Unet的结构,同时又借鉴了DenseNet的稠密连接方式(图1中各种分支)。 作者通过各层之间的稠密连接,互相连接起来,就像Denset那样,前前后后每一个模块互相作用,每一个模块都能看到彼此,那对彼此互相熟悉,分割效果自然就会变好…

位像素海外仓管理系统对接ERP系统教程,一对一教学

在海外仓管理过程中&#xff0c;对接ERP系统的重要性不言而喻的。这种对接不仅能让数据实时共享&#xff0c;还能让海外仓管理者优化整个供应链管理流程。 因此&#xff0c;今天小编就来教大家&#xff0c;海外仓仓库系统是怎么对接ERP物流系统的&#xff1f; 1.分析需求 在对接…

2024年危险化学品经营单位安全管理人员证考试题库及试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年危险化学品经营单位安全管理人员证考试题库及危险化学品经营单位安全管理人员试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff0…

Docker 镜像推送到docker hub

查看容器 #sudo docker ps -a commit容器为镜像 $ sudo docker commit d7b5e8d56a75 ubuntu_pytorch39_v4 #sha256: ********** 查看镜像信息 $ sudo docker images 登录 docker hub $ sudo docker login --username用户名 registry.cn-beijing.aliyuncs.com #密码 为…

2024年mathorcup数学建模思路及论文助攻

题目C题 物流网络分拣中心货量预测及人员排班 电商物流网络在订单履约中由多个环节组成&#xff0c;图1是一个简化的物流网络示意图。其中&#xff0c;分拣中心作为网络的中间环节&#xff0c;需要将包裹按照不同流向进行分拣并发往下一个场地&#xff0c;最终使包裹到达消费者…

在 macOS 上安装 Jenkins

Jenkins常用命令&#xff1a; 安装最新的 LTS 版本&#xff1a; brew install jenkins-lts 安装特定的 LTS 版本&#xff1a; brew install jenkins-ltsYOUR_VERSION 启动Jenkins服务&#xff1a; brew services start jenkins-lts 重启Jenkins服务&#xff1a; brew services…

[大模型]Yi-6B-Chat FastApi 部署调用

Yi-6B-Chat FastApi 部署调用 环境准备 在 Autodl 平台中租赁一个 3090 等 24G 显存的显卡机器&#xff0c;如下图所示镜像选择 PyTorch–>2.0.0–>3.8(ubuntu20.04)–>11.8&#xff08;11.3 版本以上的都可以&#xff09;。 接下来打开刚刚租用服务器的 JupyterLab…

文件上传【2】--靶场通关

1.前端禁用js绕过 上传文件&#xff0c;进行抓包&#xff0c;没有抓到&#xff0c;说明这里的验证是前端js验证跳出的弹窗 禁用js后&#xff0c;php文件上传成功。 2.文件上传.htaccess 上传png木马后连接不上 代码中存在.htaccess&#xff0c;判断此时应该就是需要用到.htac…