《Flutter 从0到1构建大前端应用》读后感

Flutter 《从0到1构建大前端应用》-所有知识点架构

文章目录

一丶原始指针事件
二丶 GestureDetector
三丶事件原理与分发机制
四丶事件通知

一丶原始指针事件

1、基本用法

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';class ListenerPage extends StatefulWidget {@override_ListenerPageState createState() => new _ListenerPageState();
}class _ListenerPageState extends State<ListenerPage> {String _opName = "未检测到操作";@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Listener原始指针事件"),),body: Center(child: Listener(                                 //监听器child: Container(alignment: Alignment.center,color: Colors.blue,width: 240.0,height: 120.0,child: Text(_opName,style: TextStyle(color: Colors.white),),),onPointerDown: (PointerDownEvent event) =>      //手指按下回调_showEventText('onPointerDown'),onPointerMove: (PointerMoveEvent event) =>      //手指移动回调_showEventText('onPointerMove'),onPointerUp: (PointerUpEvent event) =>          //手指抬起回调_showEventText('onPointerUp'),onPointerCancel: (PointerCancelEvent event) =>  //触摸事件取消回调_showEventText('onPointerCancel'),),),);}void _showEventText(String text) {setState(() {           //动态刷新数据_opName = text;});print(_opName);         //打印数据}
}

2、忽略事件

import 'package:flutter/material.dart';class PointerEventIgnorePage extends StatefulWidget {@override_PointerEventIgnorePageState createState() =>new _PointerEventIgnorePageState();
}class _PointerEventIgnorePageState extends State<PointerEventIgnorePage> {bool _ignore = false;           // IgnorePointer 忽略事件的标识，false监听事件，true忽略事件@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('忽略事件')),body: Container(alignment: AlignmentDirectional.center,child: Column(children: <Widget>[Switch(value: _ignore,onChanged: (value) {setState(() => _ignore = value);},),GestureDetector(              //手势识别onTap: () => print('GestureDetector Clicked!'),child: IgnorePointer(       //此节点和其子节点都将忽略点击事件，用 ignoring 参数区分是否忽略ignoring: _ignore,        //是否忽略事件的标识child: RaisedButton(onPressed: () => print('IgnorePointer Clicked!'),child: Text('IgnorePointer'),),),),GestureDetector(onTap: () => print('GestureDetector Clicked!'),child: AbsorbPointer(      //这个控件本身是能够响应点击事件的，它做的事情是阻止事件传播到它的子节点上去absorbing: _ignore,      //无论值是什么，都能监听child: RaisedButton(onPressed: () => print('AbsorbPointer Clicked!'),child: Text('AbsorbPointer'),),),),],),),);}
}

二丶 GestureDetector

1、常用事件

import 'package:flutter/material.dart';class GestureDetectorPage extends StatefulWidget {@override_GestureDetectorState createState() => new _GestureDetectorState();
}class _GestureDetectorState extends State<GestureDetectorPage> {String _opName = "未检测到操作";@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("GestureDetector手势识别"),),body: Center(child: GestureDetector(               //手势识别child: Container(alignment: Alignment.center,color: Colors.blue,width: 240.0,height: 120.0,child: Text(_opName,style: TextStyle(color: Colors.white),),),onTap: () => _showEventText("Tap"),               //当与屏幕短暂地触碰时触发，最常用onTapUp: (e) => _showEventText("TapUp"),          //当用户停止触碰屏幕时触发onTapDown: (e) => _showEventText("TapDown"),      //当按下屏幕时触发onTapCancel: () => _showEventText("TapCancel"),   //当用户触摸屏幕、但没有完成 Tap 事件时触发onDoubleTap: () => _showEventText("DoubleTap"),   //当快速双击屏幕时触发onLongPress: () => _showEventText("LongPress"),   //当长按屏幕时触发onVerticalDragDown: (e) => _showEventText("onVerticalDragDown"),        //当手指触碰屏幕且准备往屏幕垂直方向移动时触发onVerticalDragStart: (e) => _showEventText("onVerticalDragStart"),      //当手指触碰屏幕且开始往屏幕垂直方向移动时触发onVerticalDragUpdate: (e) => _showEventText("onVerticalDragUpdate"),    //当手指触碰屏幕且开始往屏幕垂直方向移动并发生位移时触发onVerticalDragEnd: (e) => _showEventText("onVerticalDragEnd"),          //当用户完成垂直方向触摸屏幕时触发onVerticalDragCancel: () => _showEventText("onVerticalDragCancel"),     //当用户终端了onVerticalDragDown 时触发onHorizontalDragDown: (e) => _showEventText("onHorizontalDragDown"),    //当手指触碰屏幕且准备往屏幕水平方向移动时触发onHorizontalDragStart: (e) => _showEventText("onHorizontalDragStart"),  //当手指触碰屏幕且开始往屏幕水平方向移动时触发onHorizontalDragUpdate: (e) => _showEventText("onHorizontalDragUpdate"),//当手指触碰屏幕且开始往屏幕水平方向移动并发生位移时触发onHorizontalDragEnd: (e) => _showEventText("onHorizontalDragEnd"),      //当用户完成水平方向触摸屏幕时触发onHorizontalDragCancel: () => _showEventText("onHorizontalDragCancel"), //当用户终端了 onHorizontalDragDown 时触发
//          onPanDown: (e) => _showEventText("onPanDown"),            //当用户触摸屏幕时触发
//          onPanStart: (e) => _showEventText("onPanStart"),          //当用户触摸屏幕并开始移动时触发
//          onPanUpdate: (e) => _showEventText("onPanUpdate"),        //当用户触摸屏幕并产生移动时触发
//          onPanEnd: (e) => _showEventText("onPanEnd"),              //当用户触摸屏幕时触发
//          onScaleStart: (e) => _showEventText("onScaleStart"),      //当用户触摸屏幕并开始缩放时触发
//          onScaleUpdate: (e) => _showEventText("onScaleUpdate"),    //当用户触摸屏幕并产生缩放时触发
//          onScaleEnd: (e) => _showEventText("onScaleEnd"),          //当用户完成缩放时触发),),);}void _showEventText(String text) {setState(() {_opName = text;});print(_opName);}
}

2、拖拽效果

import 'package:flutter/material.dart';class DragPage extends StatefulWidget {@override_DragState createState() => new _DragState();
}class _DragState extends State<DragPage> with SingleTickerProviderStateMixin {double _top = 0.0;double _left = 0.0;double _size = 100.0;          //大小@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("拖拽控件"),),body: Stack(children: <Widget>[Positioned(top: _top,left: _left,child: GestureDetector(     //手势识别child: FlutterLogo(       //flutter自带logosize: _size,            //动态改变logo大小),onPanUpdate: (e) {        //当用户触摸屏幕并产生移动时触发setState(() {_left += e.delta.dx;  //随着手势偏移，不断地更改左坐标的值_top += e.delta.dy;   //随着手势偏移，不断地更改上坐标的值});},),)],),);}
}

3、缩放效果

import 'package:flutter/material.dart';class ScalePage extends StatefulWidget {@override_ScaleState createState() => new _ScaleState();
}class _ScaleState extends State<ScalePage> {double _size = 100.0;         //图标大小@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("缩放识别"),),body: Center(child: GestureDetector(                        //手势识别child: Container(alignment: Alignment.center,child: FlutterLogo(size: _size,),           //动态改变图标大小),onScaleUpdate: (ScaleUpdateDetails e) {       //当用户触摸屏幕并产生缩放时触发setState(() {_size = 300 * e.scale.clamp(.5, 10.0);    //两个参数都要为小数，所以 .5也表示0.5});},),),);}
}

4、事件竞争与手势冲突

水平相反，我这里就不列举了

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';class BothDirectionPage extends StatefulWidget {@override_BothDirectionState createState() => new _BothDirectionState();
}class _BothDirectionState extends State<BothDirectionPage> {double _top = 0.0;double _left = 0.0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("事件竞争机制"),),body: Stack(children: <Widget>[Positioned(top: _top,left: _left,child: GestureDetector(child: FlutterLogo(size: 100,),//手势竞技场—垂直胜出触发，胜出条件：当用户将指针水平移动超过一定的逻辑像素，则水平识别器将声明胜利onVerticalDragUpdate: (DragUpdateDetails e) {setState(() {_top += e.delta.dy;});print("垂直胜出");},//手势竞技场—水平胜出触发，胜出条件：当用户将指针水平移动超过一定的逻辑像素，则水平识别器将声明胜利onHorizontalDragUpdate: (DragUpdateDetails e) {setState(() {_left += e.delta.dx;});print("水平胜出");},onTapDown: (e) {print("按下");                  //简单触摸时，按下时触发},onTapUp: (e) {print("松开");                  //简单触摸时，松开后触发},onHorizontalDragEnd: (e) {        //手势冲突时，若水平胜出，则 onHorizontalDragEnd会取代onTapUp，所以onTapUp不再执行print("水平移动结束");},onVerticalDragEnd: (e) {          //手势冲突时，若垂直胜出，则 onVerticalDragEnd会取代onTapUp，所以onTapUp不再执行print("垂直移动结束");},),)],),);}
}

5、手势识别器

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';class GestureRecognizerPage extends StatefulWidget {@override_GestureRecognizerState createState() => new _GestureRecognizerState();
}class _GestureRecognizerState extends State<GestureRecognizerPage> {TapGestureRecognizer _tapGestureRecognizer = new TapGestureRecognizer();        //获取点击识别器对象final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();   //获取Scaffold的 Key@overridevoid dispose() {                      //页面销毁时_tapGestureRecognizer.dispose();    //释放资源super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(key: _scaffoldKey,        //获取Scaffold的 KeyappBar: AppBar(title: Text("GestureRecognizer"),),body: Padding(padding: EdgeInsets.all(10.0),child: Column(children: <Widget>[Text.rich(TextSpan(children: [TextSpan(text: "Room is not ",style: TextStyle(fontSize: 25.0),),TextSpan(text: "built",style: TextStyle(                           //文本范围fontSize: 25.0,color: Colors.blue,fontWeight: FontWeight.bold,decoration: TextDecoration.underline,decorationThickness: 3.0,decorationColor: Colors.amber,decorationStyle: TextDecorationStyle.solid,),recognizer: _tapGestureRecognizer             //识别器：点击识别器..onTap = () {                              //监听器showInSnackBar("built: 建造");            //传入提示内容},),TextSpan(text: " in one day.",style: TextStyle(fontSize: 25.0),),],),),],),),);}void showInSnackBar(String value) {           //弹出SnackBar提示_scaffoldKey.currentState.showSnackBar(new SnackBar(content: new Text(value,style: TextStyle(fontSize: 25.0),),),);}
}

三丶事件原理与分发机制

四丶事件通知

import 'package:flutter/material.dart';class ScrollStatusPage extends StatefulWidget {@override_ScrollStatusState createState() => new _ScrollStatusState();
}class _ScrollStatusState extends State<ScrollStatusPage> {String message = "";_onStartScroll(ScrollMetrics metrics) {       //开始：点击屏幕时就会触发setState(() {message = "Scroll Start";});}_onUpdateScroll(ScrollMetrics metrics) {      //更新：上下滑动式print(metrics.pixels);                      //滑动高度：相对于整个ListView页面来说setState(() {message = "Scroll Update";});}_onEndScroll(ScrollMetrics metrics) {         //结束：离开屏幕触碰后，触发setState(() {message = "Scroll End";});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("NotificationListener"),),body: Column(children: <Widget>[Container(height: 50.0,color: Colors.green,child: Center(child: Text(message),),),Expanded(child: NotificationListener<ScrollNotification>(                  //通知监听器onNotification: (scrollNotification) {                          //通知：滚动事件if (scrollNotification is ScrollStartNotification) {          //开始通知return _onStartScroll(scrollNotification.metrics);} else if (scrollNotification is ScrollUpdateNotification) {  //更新通知return _onUpdateScroll(scrollNotification.metrics);} else if (scrollNotification is ScrollEndNotification) {     //结束通知return _onEndScroll(scrollNotification.metrics);}return false;},child: ListView.builder(    //遍历三十条数据itemCount: 30,itemBuilder: (context, index) {return ListTile(title: Text("Index : $index"));},),),),],),);}
}

《Flutter 从0到1构建大前端应用》读后感—第4章【事件处理】相关推荐

flutter从0到1构建大前端应用 pdf_前端骨架屏都是如何生成的
作者:SHERlocked93 转发链接:https://mp.weixin.qq.com/s/j2XzwLPnalDCNaKkfjH-0Q 前言相比于早些年前后端代码紧密耦合.后端工程师还得写前端 ...
flutter从0到1构建大前端应用 pdf_推荐前端热门GitHub代码库「值得收藏」
作者:刘小夕前端宇宙转发链接:https://mp.weixin.qq.com/s/Ypl3K2wVd_NrgCg_zogngA
Flutter从0到1构建大前端应用（一）：Dart环境配置及基础语法
文章目录代序环境搭建使用国内镜像 windowsDart环境变量配置教程 windows flutter环境变量配置教程 1.解压flutter-sdk到任意目录 2.配置flutter-sdk ...
Flutter从0到1构建大前端应用（四）：组件
文章目录前言阅读建议正文 MaterialApp 属性 Demo 效果展示 Scaffold 属性 Demo 效果展示 Container 基本用法 Demo 效果演示 Text 属性表: De ...
从0到1构建大促运营活动
从0到1构建大促运营活动前言一.需求背景依托流量平台拉新业务促活二.需求分析 2.1 运营玩法分析 2.2 业务需求分析 2.3 领域对象识别 2.4 业务场景拆分三.任务拆解四.研发 ...
从0到1构建大数据生态系列1：数据蛮荒中的拓荒之举
缘起我们都知道,当前大数据的需求基本属于遍地开花.无论是帝都.魔都,还是广州.深圳,亦或是全国其他各地,都在搞大数据:不管是不到百人的微小公司,还是几百上千人的中型公司,亦或是上万的大型公司,都在需 ...
Flutter 快速上手，秒变大前端
简介:近两年Flutter的热度不断提升,无论在阿里还是外部公司,参与Flutter生态建设的人越来越多.Flutter作为跨端的UI框架,未来也有很大的可能像Rax一样作为集团内营销活动页面搭建的D ...
火了几年的大前端，现在怎么样了？
大概从2017年开始,大前端这个名词开始出现,infoQ的一些技术大会也开始设置大前端议题,react native火的一塌糊涂,阿里.京东.去哪儿也开始推出自己的跨平台实践.时至今日,大前端已经发展 ...
大前端时代的乱流：带你了解最全面的 Flutter Web
Flutter Web 稳定版本发布至今也有一年多了,经过这一年多的发展,今天就让我们来看看作为大前端时代的乱流,Flutter Web 究竟有什么不同之处,本篇分享主要内容是目前 Flutter 下 ...
Flutter快学快用开篇词通往大前端的一把关键钥匙 Flutter
你好,欢迎来到 Flutter 课程,我是清弦. 近 10 年来,我一直在一线大厂从事 Web 前端研发工作,负责前端.中台业务以及跨端平台的研发和团队管理.目前大前端因为"一套代码,多端运 ...

《Flutter 从0到1构建大前端应用》读后感—第4章【事件处理】

文章目录

一丶原始指针事件

二丶 GestureDetector

三丶事件原理与分发机制

四丶事件通知

《Flutter 从0到1构建大前端应用》读后感—第4章【事件处理】相关推荐

最新文章

热门文章

《Flutter 从0到1构建大前端应用》读后感—第4章【事件处理】

文章目录

一丶 原始指针事件

二丶 GestureDetector

三丶 事件原理与分发机制

四丶事件通知

《Flutter 从0到1构建大前端应用》读后感—第4章【事件处理】相关推荐

最新文章

热门文章

一丶原始指针事件

三丶事件原理与分发机制