Flutter 04 按钮Button和事件处理、弹框Dialog、Toast

一、按钮组件

1、按钮类型:

2、按钮实现效果:

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App")),body: const LayoutDemo(),),);}
}class LayoutDemo extends StatelessWidget {const LayoutDemo({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return ListView(children: [Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [ElevatedButton(onPressed: () {print("ElevatedButton....");},child: const Text("普通按钮")),TextButton(onPressed: () {}, child: const Text("文本按钮")),OutlinedButton(onPressed: () {}, child: const Text("边框按钮")),IconButton(onPressed: () {}, icon: const Icon(Icons.thumb_up))],),const SizedBox(height: 20,),Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ElevatedButton.icon(onPressed: () {},icon: const Icon(Icons.send),label: const Text("发送")),TextButton.icon(onPressed: () {},icon: const Icon(Icons.info),label: const Text("消息")),OutlinedButton.icon(onPressed: null,icon: const Icon(Icons.add),label: const Text("增加"))]),const SizedBox(height: 20,),Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ElevatedButton(style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色foregroundColor:MaterialStateProperty.all(Colors.white) //文字图标颜色),onPressed: () {print("ElevatedButton");},child: const Text("普通按钮")),]),const SizedBox(height: 20,),Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [Container(height: 60,width: 140,child: ElevatedButton(onPressed: () {},child: const Text("大按钮"),),),SizedBox(height: 40,width: 100,child: ElevatedButton.icon(onPressed: () {},icon: const Icon(Icons.search),label: const Text("搜索"),),)],),const SizedBox(height: 20,),Row(children: [Expanded(flex: 1,child: Container(margin: const EdgeInsets.all(20),height: 50,child: ElevatedButton(onPressed: () {},style: ButtonStyle(backgroundColor: MaterialStateProperty.all(const Color.fromARGB(220, 245, 71, 71)),foregroundColor:MaterialStateProperty.all(Colors.white)),child: const Text("登录"),),))],),const SizedBox(height: 20,),Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(//圆角RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)))),onPressed: () {},child: const Text("圆角")),SizedBox(height: 80,width: 80,child: ElevatedButton(style: ButtonStyle(shape: MaterialStateProperty.all(//圆形const CircleBorder(side:BorderSide(width: 2, color: Colors.yellow)))),onPressed: () {},child: const Text("圆形")),),],),const SizedBox(height: 20),Row(mainAxisAlignment: MainAxisAlignment.center,children: [OutlinedButton(style: ButtonStyle(side: MaterialStateProperty.all(//修改边框颜色const BorderSide(width: 1, color: Colors.red))),onPressed: () {},child: const Text("带边框的按钮"))],)],);}
}

二、事件处理

1、在Flutter中,手势有两个不同的层次:

第一层:原始指针事件(Pointer Events):描述了屏幕上由触摸板、鼠标、指示笔等触发的指针的位置和移动。

第二层:手势识别(Gesture Detector):这个是在原始事件上的一种封装。

2、指针事件Pointer:

demo:

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App")),body: MyHomePage(),),);}
}//事件基本应用,指针事件(Touch)
class MyHomePage extends StatelessWidget {const MyHomePage({super.key});@overrideWidget build(BuildContext context) {return Center(child: Listener(child: Container(width: 200,height: 200,color: Colors.red,// child:  ElevatedButton(//     onPressed: () {//       print("ElevatedButton....");//     },//     child: const Text("普通按钮")),),onPointerDown: (event) => print("手指按下,当前位置,全局:${event.position}|控件内:${event.localPosition}"),onPointerMove: (event) => print("手指移动:$event"),onPointerUp: (event) => print("手指抬起:$event"),),);}
}

3、手势识别(Gesture Detector):

1)GestureDetector封装了点击、双击、滑动等大量功能,使开发者可以快速使用这些基础性功能:
GestureDetector({super.key,this.child,this.onTapDown,this.onTapUp,this.onTap,this.onTapCancel,this.onSecondaryTap,this.onSecondaryTapDown,this.onSecondaryTapUp,this.onSecondaryTapCancel,this.onTertiaryTapDown,this.onTertiaryTapUp,this.onTertiaryTapCancel,this.onDoubleTapDown,this.onDoubleTap,this.onDoubleTapCancel,this.onLongPressDown,this.onLongPressCancel,this.onLongPress,this.onLongPressStart,this.onLongPressMoveUpdate,this.onLongPressUp,this.onLongPressEnd,this.onSecondaryLongPressDown,this.onSecondaryLongPressCancel,this.onSecondaryLongPress,this.onSecondaryLongPressStart,this.onSecondaryLongPressMoveUpdate,this.onSecondaryLongPressUp,this.onSecondaryLongPressEnd,this.onTertiaryLongPressDown,this.onTertiaryLongPressCancel,this.onTertiaryLongPress,this.onTertiaryLongPressStart,this.onTertiaryLongPressMoveUpdate,this.onTertiaryLongPressUp,this.onTertiaryLongPressEnd,this.onVerticalDragDown,this.onVerticalDragStart,this.onVerticalDragUpdate,this.onVerticalDragEnd,this.onVerticalDragCancel,this.onHorizontalDragDown,this.onHorizontalDragStart,this.onHorizontalDragUpdate,this.onHorizontalDragEnd,this.onHorizontalDragCancel,this.onForcePressStart,this.onForcePressPeak,this.onForcePressUpdate,this.onForcePressEnd,this.onPanDown,this.onPanStart,this.onPanUpdate,this.onPanEnd,this.onPanCancel,this.onScaleStart,this.onScaleUpdate,this.onScaleEnd,this.behavior,this.excludeFromSemantics = false,this.dragStartBehavior = DragStartBehavior.start,})
2)Gesture种类非常多:

3)事件拦截应用:

可以通过Stack布局来解决手势冲突,避免嵌套。

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App")),body: MyHomePage(),),);}
}class MyHomePage extends StatelessWidget {_onPointerDown(PointerDownEvent event) {if (kDebugMode) {print("_onPointerDown:$event");}}_onPointerMove(PointerMoveEvent event) {if (kDebugMode) {print("_onPointerMove:$event");}}_onPointerUp(PointerUpEvent event) {if (kDebugMode) {print("_onPointerUp:$event");}}_onPointerEnter(PointerEnterEvent event) {if (kDebugMode) {print("_onPointerEnter:$event");}}_onPointerExit(PointerCancelEvent event) {if (kDebugMode) {print("_onPointerExit:$event");}}_onPointerHover(PointerHoverEvent event) {if (kDebugMode) {print("_onPointerHover:$event");}}_onPointerDown1(PointerDownEvent event) {if (kDebugMode) {print("_onPointerDown1:$event");}}_onPointerMove1(PointerMoveEvent event) {if (kDebugMode) {print("_onPointerMove1:$event");}}_onPointerUp1(PointerUpEvent event) {if (kDebugMode) {print("_onPointerUp1:$event");}}@overrideWidget build(BuildContext context) {return Listener(onPointerDown: _onPointerDown,onPointerMove: _onPointerMove,onPointerUp: _onPointerUp,onPointerCancel: _onPointerExit,onPointerHover: _onPointerHover,child: Stack(children: <Widget>[GestureDetector(//监听点击事件onTap: () => {print("点击事件")},//监听横向滑动事件onVerticalDragUpdate: (DragUpdateDetails details) => {print("横向滑动:$details")},child: Listener(onPointerDown: _onPointerDown1,onPointerMove: _onPointerMove1,onPointerUp: _onPointerUp1,child: Center(child: Container(color: Colors.red,width: 200.0,height: 100.0,),)),),],));}
}

三、弹框组件Dialog

Dialog页面代码:

import 'package:flutter/material.dart';
import 'dialog/MyToast.dart';import 'dialog/dialog.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App")),body: const LayoutDemo(),),);}
}class LayoutDemo extends StatelessWidget {const LayoutDemo({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[ElevatedButton(onPressed: () async{var result = await alertDialog(context);print(result);},child: const Text('alert弹出框-AlertDialog '),),const SizedBox(height: 20),ElevatedButton(onPressed: () async{var result = modelBottomSheet(context);print("result:$result");},child: const Text('select弹出框-SimpleDialog'),),const SizedBox(height: 20),ElevatedButton(onPressed: () async{var result = await showDialog(barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框 context: context,builder: (context) {return MyDialog(title: '标题',onClosed: () {print("关闭");Navigator.of(context).pop();},content: "我是一个内容");}, context: context);print("result:$result");},child: const Text('自定义dialog'),),const SizedBox(height: 20),ElevatedButton(onPressed: () async{var result = await simpleDialog(context);print("result:$result");},child: const Text('ActionSheet底部弹出框'),),const SizedBox(height: 20),ElevatedButton(onPressed: (){// Fluttertoast.showToast(//     msg: "提示信息",////     toastLength: Toast.LENGTH_LONG,   //值针对 android 平台//     timeInSecForIosWeb: 1,  //提示时间 针对ios 和 web//     backgroundColor: Colors.black26, //背景颜色//     textColor: Colors.white,   //文本颜色//     fontSize: 16.0  //文本字体大小// );Toast.showInfo("message", context: context, duration: 2000);},child: const Text('Toast'),),// fluttertoast],),);}
}

1、AlertDialog:

最简单的方案是利用AlertDialog组件构建一个弹框

import 'package:flutter/material.dart';Object alertDialog(BuildContext context) async {var result = await showDialog(barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框context: context,builder: (context) {return AlertDialog(title: const Text("提示信息!"),content: const Text("您确定要删除吗"),actions: [TextButton(onPressed: () {print("ok");Navigator.of(context).pop("ok"); //点击按钮让AlertDialog消失},child: const Text("确定")),TextButton(onPressed: () {print("cancel");Navigator.of(context).pop("取消");},child: const Text("取消"))],);});return result;
}

 2、SimpleDialog:

通过SimpleDialog构建一个选择框

import 'package:flutter/material.dart';Object simpleDialog(BuildContext context) async {var result = await showDialog(barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框context: context,builder: (context) {return SimpleDialog(title: const Text("请选择语言"),children: [SimpleDialogOption(onPressed: () {print("汉语");Navigator.pop(context, "汉语");},child: const Text("汉语"),),const Divider(),SimpleDialogOption(onPressed: () {print("英语");Navigator.pop(context, "英语");},child: const Text("英语"),),const Divider(),SimpleDialogOption(onPressed: () {print("日语");Navigator.pop(context, "日语");},child: const Text("日语"),),const Divider(),],);});return result;
}

3、showModalBottomSheet:

通过showModalBottomSheet构建一个底部弹框

 

import 'package:flutter/material.dart';Object modelBottomSheet(BuildContext context) {return showModalBottomSheet(context: context,builder: (context) {return SizedBox(height: 240,child: Column(crossAxisAlignment: CrossAxisAlignment.center,children: [ListTile(title: const Text("分享"),onTap: () {print("分享");Navigator.of(context).pop("分享");},),const Divider(),ListTile(title: const Text("收藏"),onTap: () {print("收藏");Navigator.of(context).pop("收藏");},),const Divider(),ListTile(title: const Text("取消"),onTap: () {print("取消");Navigator.of(context).pop("取消");},),const Divider(),],),);});
}

4、自定义Flutter Dialog:

import 'package:flutter/material.dart';// 自定义dialog
class MyDialog extends Dialog {String title;String content;Function()? onClosed;MyDialog({Key? key, required this.title,requiredthis.onClosed,this.content=""}) : super(key: key);@overrideWidget build(BuildContext context) {return Material(type: MaterialType.transparency,child: Center(child: Container(height: 300,width: 300,color: Colors.white,child: Column(children: <Widget>[Padding(padding: const EdgeInsets.all(10),child: Stack(children: <Widget>[Align(alignment: Alignment.center,child: Text(title),),Align(alignment: Alignment.centerRight,child: InkWell(onTap: onClosed,child: const Icon(Icons.close),),)],),),const Divider(),Container(padding: const EdgeInsets.all(10),width: double.infinity,child: Text(content,textAlign: TextAlign.left),)],),)),);}
}

四、Toast

所谓toast框其实就是在图层的最上面一层插入一个显示图层,在Flutter中利用OverLayEntry构建图层,然后通过Overlay进行插入。

1、自定义Toast:

import 'package:flutter/material.dart';class Toast {static var _lastMsg;static int _lastShowms = 0;static Future _show(BuildContext context, String msg, int duration) {OverlayEntry entry = OverlayEntry(builder: (BuildContext context) => Positioned(//top值,可以改变这个值来改变toast在屏幕中的位置top: MediaQuery.of(context).size.height.toDouble() * 0.5,child: Container(alignment: Alignment.center,width: MediaQuery.of(context).size.width,child: Padding(padding: const EdgeInsets.symmetric(horizontal: 10.0),child: _buildToastWidget(context, msg),)),));///往Overlay中插入插入OverlayEntryOverlay.of(context)?.insert(entry);///两秒后,移除ToastFuture result = Future.delayed(Duration(milliseconds: duration)).then((value) {entry.remove();});return result;}//toast UI绘制static _buildToastWidget(context, String msg) {return Row(mainAxisSize: MainAxisSize.min,children: [Container(alignment: Alignment.center,decoration: BoxDecoration(borderRadius: BorderRadius.circular(12.0),shape: BoxShape.rectangle,color: Colors.black45,),child: Padding(padding: const EdgeInsets.all(10),child: Text(msg,style: const TextStyle(color: Colors.white,decoration: TextDecoration.none,fontSize: 14)),))],);}//处理重复多次点击static void _handleDuplicateAndShow(String message, BuildContext context, int duration) {if (_lastMsg == message) {//相同信息内容int currentms = DateTime.now().millisecondsSinceEpoch;int interval = currentms - _lastShowms;if (interval > duration) {//大于时间间隔 可以显示_show(context, message, duration);_lastShowms = currentms;}} else {_show(context, message, duration);_lastMsg = message;}}/// 提示static void showInfo(String message, {required BuildContext context, int duration = 2000}) {_handleDuplicateAndShow(message, context, duration);}
}

2、使用第三方框架(fluttertoast):

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式】第16节:行为型模式之“命令模式”

一、简介 命令模式&#xff1a;将请求&#xff08;命令&#xff09;封装为一个对象&#xff0c;这样可以使用不同的请求参数化其他对象&#xff08;将不同请求依赖注入到其他对象&#xff09;&#xff0c;并且能够支持请求&#xff08;命令&#xff09;的排队执行、记录日志、…

硬件测试(二):波形质量

一、信号质量测试 信号在传输的过程中&#xff0c;一般不是标准的矩形波信号&#xff0c;信号质量测试即通过示波器测试单板硬件的数字信号和模拟信号的各项指标&#xff0c;包括电源、时钟、复位、CPU小系统、外部接口&#xff08;USB、网口、串口&#xff09;、逻辑芯片(CPLD…

WiFi 6下的大规模部署策略

随着数字化时代的快速发展&#xff0c;我们正处于一个多设备、高密度连接的时代。在这个背景下&#xff0c;WiFi 6&#xff08;802.11ax&#xff09;作为一项新的无线通信标准&#xff0c;被广泛认为是满足未来大规模连接需求的关键技术。本文将深入研究WiFi 6在大规模部署中的…

ardupilot开发 --- 代码解析 篇

0. 前言 根据SITL的断点调试和自己阅读代码的一些理解&#xff0c;写一点自己的注释&#xff0c;有什么不恰当的地方请各位读者不吝赐教。 1. GCS::update_send 线程 主动向MavLink system发送消息包。 1.1 不断向地面站发送飞机状态数据 msg_attitude: msg_location: n…

【腾讯云HAI域探秘】AI让我变成灵魂画手

【腾讯云HAI域探秘】AI让我变成灵魂画手 文章目录 【腾讯云HAI域探秘】AI让我变成灵魂画手前言环境搭建进入 StableDiffusionWebUI使用 高性能应用服务HAI 部署的 StableDiffusionWebUI 快速进行AI绘画总结 前言 最近有幸参与了腾讯云举办的 腾讯云 HAI 产品体验活动。在这个过…

Java——java.time包使用方法详解

Java——time包使用方法详解 java.time 包是 Java 8 引入的新日期和时间 API&#xff08;JSR 310&#xff09;&#xff0c;用于替代旧的 java.util.Date 和 java.util.Calendar 类。它提供了一组全新的类来处理日期、时间、时间间隔、时区等&#xff0c;具有更好的设计和易用性…

“泰山众筹:引爆全球的财富狂潮!“

想象一下&#xff0c;你手中的白酒不再只是简单的饮品&#xff0c;而是一份珍贵的投资&#xff0c;一份充满惊喜的冒险&#xff0c;一份财富的种子&#xff01;在这个神奇的时刻&#xff0c;让我们一起探索泰山众筹模式的魅力&#xff01; 在传统的投资领域&#xff0c;你是否…

PC端视频编辑处理的全方位解决方案

视频已经成为企业传播信息、展示品牌形象的重要工具。然而&#xff0c;制作高质量的视频并非易事&#xff0c;需要专业的技术和设备。这就是美摄科技发挥作用的地方。我们为企业提供一站式的PC端视频编辑处理解决方案&#xff0c;帮助企业轻松制作出专业级别的视频。 美摄科技…

学习笔记二十八:K8S控制器Daemonset入门到企业实战应用

DaemonSet控制器&#xff1a;概念、原理解读 DaemonSet概述DaemonSet工作原理&#xff1a;如何管理PodDaemonset典型的应用场景DaemonSet 与 Deployment 的区别DaemonSet资源清单文件编写技巧 DaemonSet使用案例&#xff1a;部署日志收集组件fluentdDaemonset管理pod&#xff1…

【ES专题】ElasticSearch 高级查询语法Query DSL实战

目录 前言阅读对象阅读导航前置知识数据准备笔记正文一、ES高级查询Query DSL1.1 基本介绍1.2 简单查询之——match-all&#xff08;匹配所有&#xff09;1.2.1 返回源数据_source1.2.2 返回指定条数size1.2.3 分页查询from&size1.2.4 指定字段排序sort 1.3 简单查询之——…

图片路径名动态生成

写成这样也可以 :src"./src/assets/ScreenLeft/btn${isShowLeft ? Show : Hide}.png"为了节省开销&#xff0c;这种小图标&#xff0c;可以用i标签 const imgUrl ref("icon1");<iclass"w-50px h-50px":style"{backgroundImage: url(./…

VR全景技术在文化展示与传播中有哪些应用?

引言&#xff1a; 随着科技的不断进步&#xff0c;虚拟现实&#xff08;VR&#xff09;全景技术已经成为文化展示与传播领域的一项重要工具。那么VR全景技术是如何改变文化展示与传播方式&#xff0c;VR全景技术又如何推动文化的传承和普及呢&#xff1f; 一&#xff0e;VR技术…

matplotlib画刻度为对数的图

1. 代码 import matplotlib.pyplot as plta [1000,2000,3000,4000,5000] a_x [1, 2, 3, 4, 5] b [0.00001,0.00025,0.001,0.005,0.000001]plt.figure(figsize(10, 6)) plt.plot(a_x, b, cred, labellabel) plt.scatter(a_x, b, cblue) plt.xlabel(step$(\\times 10^3)$) pl…

iis前端代理后台tomcat

1)tomcat服务器配置运行好&#xff0c;服务地址位于 localhost:8080/wechat 2)iis 绑定了域名 api.abc.com 希望访问 api.abc.com/wechat时&#xff0c;实际由tomcat的服务处理; 3)iis上需要添加组件 requestRouter_amd64.msi rewrite_amd64_zh-CN.msi 4)iis进行相关配置…

视频列表:点击某个视频进行播放,其余视频全部暂停(同时只播放一个视频)

目录 需求实现原理实现代码页面展示 需求 视频列表&#xff1a;点击某个视频进行播放&#xff0c;其余视频全部暂停&#xff08;同时只播放一个视频&#xff09; 实现原理 在 video 标签添加 自定义属性 id (必须唯一)给每个 video 标签 添加 play 视频播放事件播放视频时&…

51单片机-点阵屏led

代码配置 这样就能选择每一列哪个亮了 进行位选&#xff0c;段清零&#xff0c;这样就不会影响多列同时了 实现动画 1、使用文字摸提取文件&#xff0c;提取图案的16进制表示数组 offest作为偏移量&#xff0c;count作为计时。count10,偏移量加1&#xff0c;就相当于得到下一…

ArcGIS制作土地利用现状图

一、现状图成果 土地利用现状图是规划制图中一种基本的图件,基于ArcGIS制作的现状图如下所示: 二、现状图制作 1. 数据准备 (1)土地利用数据 (2)地形图 (3)影像地图 (4)其他数据 2. 符号化 加载现状地块数据。 双击地块图层,切换到符号系统,选择类别下的唯…

HarmonyOS鸿蒙原生应用开发设计- 隐私声明

HarmonyOS设计文档中&#xff0c;为大家提供了独特的隐私声明&#xff0c;开发者可以根据需要直接引用。 开发者直接使用官方提供的隐私声明内容&#xff0c;既可以符合HarmonyOS原生应用的开发上架运营规范&#xff0c;又可以防止使用别人的内容产生的侵权意外情况等&#xff…

TSINGSEE青犀智能视频管理监督系统在车站场景中的应用方案

旭帆科技的智能视频监控系统可应对绝大多数场景&#xff0c;近期就有一个粉丝私信&#xff0c;随着年关将近&#xff0c;越来越多的人需要返乡和外出旅游&#xff0c;高铁站、火车站这些地方人员密集度高&#xff0c;发生事故的风险也大&#xff0c;问我们有没有关于车站的智能…

工业级环网交换机的优点

为了满足工业环境的特殊需求和挑战&#xff0c;使用工业级环网交换机可以确保网络的稳定、可靠和安全。工业环境交换机能够在恶劣环境条件下提供稳定的网络连接&#xff0c;确保工业网络运行的可靠性。 工业级环网交换机的优点 工业现场为什么要使用工业级环网交换机&#xff…