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

这篇具有很好参考价值的文章主要介绍了flutter中鼠标检测事件的应用---主要在于网页端使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

flutter中鼠标检测事件的应用---主要在于网页端使用,flutter,计算机外设
鼠标放上去
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')],
    );
  }
}

使用文章来源地址https://www.toymoban.com/news/detail-847417.html

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

到了这里,关于flutter中鼠标检测事件的应用---主要在于网页端使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter 封装webview和使用本地网页

    最先看到flutter_webview_plugin 用法特别简单 flutter_webview_plugin | Flutter Package Plugin that allow Flutter to communicate with a native Webview. https://pub-web.flutter-io.cn/packages/flutter_webview_plugin 缺点: 没有实现js sdk的功能 没有办法 使用JavaScriptChannel 的功能 后面使用webview_flutter webview_flutter | Flutter

    2024年03月26日
    浏览(53)
  • flutter学习-day22-使用GestureDetector识别手势事件

    在 flutter 中,GestureDetector 是手势识别的组件,可以识别点击、双击、长按、拖动、缩放等手势事件,并且可以与子组件进行交互,构造函数属性如下: GestureDetector 内部封装了 Listener,用以识别语义化的手势。 当同时监听 onTap 和 onDoubleTap 事件时,当用户触发 tap 事件时,会

    2024年02月03日
    浏览(42)
  • JavaScript鼠标拖动事件监听使用方法及实例效果

    首先鼠标拖动事件需要与标签的 draggable属性配合使用,在标签中设置draggable属性为true则表示允许拖动该元素 鼠标拖动事件,当元素被拖动时该事件会持续重复触发,可以用于实时定位鼠标位置以让某元素跟随鼠标 当拖动开始时触发一次该事件,可以用于拖动前对元素进行一

    2024年02月05日
    浏览(40)
  • 网页爬虫逆向与AST入门系列教程(八、AST的应用之安全检测)

    在前面的文章中,我们已经介绍了AST的基本概念、生成方法以及在代码混淆解析、反爬虫技术解析、数据提取与分析以及代码转换中的应用。在本篇中,我们将继续探讨AST在网页爬虫逆向中的另一个重要领域:安全检测。 1. 安全检测的重要性 在进行网页爬虫逆向工作时,安

    2024年02月16日
    浏览(47)
  • PyQt5 鼠标和键盘事件的使用方法和示例

    了解如何在 PyQt5 中处理鼠标和键盘事件,以及如何使用这些事件来改变窗口的状态。

    2024年02月13日
    浏览(46)
  • 美国头部大模型阵营基本确立,中国的AI优势在于应用|Alpha峰会

    1、在真正有价值的AI应用生态繁荣之前,押注 大模型 这样的核心技术源头及“卖铁锹”公司是有一定道理的。 2、像OpenAI这类闭源大语言模型,会向接入其端口的APP应用收取流量费。 应用公司为了降低流量费用的负担 ,一种方法是利用开源模型,自己训练出一个中小模型,

    2024年01月19日
    浏览(47)
  • Qt6使用QChartView类与鼠标事件实现波形的缩放、平移、坐标轴单轴缩放与鼠标悬停显示点的数据

            说在前面,本人也是近段时间刚开始学习Qt,实现上述功能的方法可能并不是最优,写此篇文章也是记录下学习的过程,也与大家分享一下。(在此先描述,后面会附上代码)(前面说的会比较基础)         首先,要使用QChartView类得现在.pro文件中加入:(得确保

    2024年02月09日
    浏览(39)
  • layui框架学习(40:数据表格_主要事件)

      Layui数据表格模块主要通过各类事件响应工具栏操作、单元格编辑或点击等交互操作,本文学习table数据表格模块中的主要事件及处理方式。    头部工具栏事件 。通过代码“table.on(‘toolbar(test)’, function(obj))”获取lay-filter属性为test的数据表格的头部工具栏事件,头部

    2024年02月10日
    浏览(45)
  • 网页爬虫中常用代理IP主要有哪几种?

    各位爬虫探索者,你是否有想过在网页爬虫中使用代理IP来规避限制实现数据自由?在这篇文章中,作为一名IP代理产品供应商,我将为你揭示常见的网页爬虫代理IP类型,让你在爬虫的世界中游刃有余! 一、免费公开代理IP: 这是最常见的一种代理IP类型。它们通常是一些公

    2024年02月13日
    浏览(57)
  • 网联V2X视频事件检测相机使用说明书

    1 产品概览 网联 V2X视频事件检测相机 视频事件检测相机 ,内置 1/1.8″逐行扫描 800万像素传感器;视 万像素传感器;视 频编码协议支持 H.265、H.264、MJPEG;具有 1个 10M/100M/1000M自适应以 太网 RJ45接口、 1路 RS485接口, 1路 SFP接口 ,2路报警输入, 1路报警输 出,支持 出,支持

    2024年02月12日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包