Flutter 相关知识点
1、下载sdk
flutter官网:Install and run DevTools from Android Studio | Flutter
2、配置环境变量
as安装 dart和flutter插件,执行flutter doctor,到flutter module目录下(如:cd xxx_module),执行flutter pub get flutter clean
3、创建flutter module
flutter create -t module my_flutter
其中my_flutter为module的名字
flutter配置文件:pubspec.yaml
4、flutter hot restart
先到flutter module目录下,杀死app进程
然后执行flutter attach 命令,会出现如下
如果一直waiting,可以杀死app,重新运行一下代码
To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
最后,如果更改了某文件后,可以直接按键盘上的r键,进行热更新
5、flutter基础知识学习
首先引入了material库material是什么,是一个拥有基本样式的库。
runApp(runApp是什么)是程序的开始,这个函数需要一个Widget(Widget是什么),习惯叫他组件。
这里传入了一个嵌套的Widget,Center() 是一个居中的widget,Text() 是一个文本的widget,style顾名思义样式
import 'package:flutter/material.dart';void main() {runApp(Center(child: Text("Hello World",style: TextStyle(fontSize: 36),),));
}
import 'package:flutter/material.dart';
void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text("flutter"),),body: Center(child: Text("Hello World",style: TextStyle(fontSize: 36),),),),));
什么是runApp
Flutter应用程序是从调用这个函数开始的
什么是Widget
它就好像Vue中的组件,在Flutter中,万物皆Widget。
什么是Material
material是Google公司推行的一套设计风格,是一套规范。例如过场动画的样子已经定义了。
这里引用的material库,是已经实现了Material的Widget。
什么是Scaffold
翻译过来是脚手架的意思,他有appBar,body等属性,代表着导航栏跟页面内容
BuildContext:上下文
ListView.builder:列表。itemcount数量 itembuild是怎么展示
Expanded: 自适应宽高 扩展,如果要让里面的Column
占满外部Column
,可以使用Expanded
组件
onPressed :点击事件
6、flutter 调试
可视化:
官方文档:2.7 调试Flutter应用 | 《Flutter实战·第二版》
debugPaintSizeEnabled = true; //显示边界布局然后自动import即可
flutter 打断点
1、flutter attach,杀死app,重新进入
2、待黄色闪电标志亮起来后,去打断点即可
7、flutter 看层级Dev Tools
方案1:debug下面,点击蓝色图标
方案2:点击as右边栏的Flutter inspector
想看哪个层级,点击哪个即可
8、Flutter生命周期:面试官:知道 Flutter 生命周期?下周来入职! - 掘金
StatelessWidget和StatefulWidget
StatelessWidget: 没有状态改变的Widget,通常这种Widget仅仅是做一些展示工作而已;
StatefulWidget: 需要保存状态,并且可能出现状态改变的Widget;实现一个 StatefulWidget 至少需要两个类:
一个是 StatefulWidget 类。
另一个是 Sate 类。StatefulWidget 类本身是不可变的,但是 State 类在 Widget 生命周期中始终存在。StatefulWidget 将其可变的状态存储在由 createState 方法创建的 State 对象中,或者存储在该 State 订阅的对象中。
StatefulWidget 生命周期
createState:该函数为 StatefulWidget 中创建 State 的方法,当 StatefulWidget 被创建时会立即执行 createState。createState 函数执行完毕后表示当前组件已经在 Widget 树中,此时有一个非常重要的属性 mounted 被置为 true。
initState:该函数为 State 初始化调用,只会被调用一次,因此,通常会在该回调中做一些一次性的操作,如执行 State 各变量的初始赋值、订阅子树的事件通知、与服务端交互,获取服务端数据后调用 setState 来设置 State。
didChangeDependencies:该函数是在该组件依赖的 State 发生变化时会被调用。这里说的 State 为全局 State,例如系统语言 Locale 或者应用主题等,Flutter 框架会通知 widget 调用此回调。类似于前端 Redux 存储的 State。该方法调用后,组件的状态变为 dirty,立即调用 build 方法。
build:主要是返回需要渲染的 Widget,由于 build 会被调用多次,因此在该函数中只能做返回 Widget 相关逻辑,避免因为执行多次而导致状态异常。
reassemble:主要在开发阶段使用,在 debug 模式下,每次热重载都会调用该函数,因此在 debug 阶段可以在此期间增加一些 debug 代码,来检查代码问题。此回调在 release 模式下永远不会被调用。
didUpdateWidget:该函数主要是在组件重新构建,比如说热重载,父组件发生 build 的情况下,子组件该方法才会被调用,其次该方法调用之后一定会再调用本组件中的 build 方法。
deactivate:在组件被移除节点后会被调用,如果该组件被移除节点,然后未被插入到其他节点时,则会继续调用 dispose 永久移除。
dispose:永久移除组件,并释放组件资源。调用完 dispose 后,mounted 属性被设置为 false,也代表组件生命周期的结束。
flutter 生命周期ContainerLifeCycle:flutterboost监听生命周期
Init:
Appear:打开屏幕回到前台Foreground之后走
WillDisappear
Disappear:锁屏
Destroy
Background
Foreground 打开屏幕回到前台
Native->Flutter,ContainerLifeCycle.Init->ContainerLifeCycle.AppearFlutter->Flutter旧的界面:ContainerLifeCycle.Appear(不会调用,只表示当前状态)->ContainerLifeCycle.Disappear->新的界面:ContainerLifeCycle.Init->ContainerLifeCycle.AppearFlutter->NativeContainerLifeCycle.Appear(不会调用,只表示当前状态)->ContainerLifeCycle.Disappear->Flutter->Home->FlutterContainerLifeCycle.Disappear->ContainerLifeCycle.Background(Home)->ContainerLifeCycle.Foreground->ContainerLifeCycle.AppearFlutter->backContainerLifeCycle.Appear(不会调用,只表示当前状态)->ContainerLifeCycle.Disappear->ContainerLifeCycle.Destroy
9、Future:异步执行
Flutter中的异步其实就是用的Dart里面的Future,then函数,回调catchError这些东西 Future相关回调函数 future里面有几个函数: then:异步操作逻辑在这里写。 whenComplete:异步完成时的回调。 catchError:捕获异常或者异步出错时的回调。
如:
Future loadRequest(BuildContext context) async {detailModel = await OrderDetailRequest.orderDetailInfoRequest(context,params: widget.paramDict ?? {});setState(() {});
return detailModel;
在我们平时开发中我们是这样用的,首先给我们的函数后面加上async关键字,表示异步操作,然后函数返回值写成Future, 逻辑前面加上一个await关键字,然后可以使用future.then等操作。
【结论】: 创建多个Future,执行顺序和和创建Future的先后顺序有关,如果只是单独的调用then,没有嵌套使用的话,和调用then的先后顺序无关。
【结论】: 执行顺序和和创建Future的先后顺序有关,如果有多个then嵌套执行,先执行外面的then,然后执行里面的then。
【结论】: 首先执行顺序和创建Future的先后顺序有关,如果遇到多个 then 嵌套,先执行外面的 then,然后再执行里面的then,如果then里面还有创建Future,要等到then执行完毕,之后执行Future。
10、flutter 加载图片
在工程根目录下创建一个类似images目录,并将图片 xxx.png 拷贝到该目录。
在pubspec.yaml中的flutter部分添加如下内容:flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.使用Material Design字体图标Flutter默认包含了一套Material Design的字体图标,在pubspec.yaml文件中的配置如下uses-material-design: true# To add Flutter specific assets to your application, add an assets section, # like this:assets:# assets-generator-begin# assets/*- assets/images/- assets/images/home/- assets/images/find_goods/- assets/images/member/- assets/images/order_detail/- assets/images/shopcart/- assets/images/common/
11、flutter typedef
翻译:
在 Dart 中,方法与 object,字符串,数字这几种类型一样都被称之为对象.一个 typedef 或者一个方法的 alias,为函数类型提供一个名称,在声明字段和返回类型时可以使用该名称。当函数类型分配给变量时,typedef 保留类型信息。 理解: 这句话的意思是说,如同 object,boolean,number 这几种被称为基本类型一样,typedef 的作用是可以自定义一种数据类型,并且这种数据类型属于 函数类型。同时 typedef 可以保留函数签名信息
使用方式:
typedef Fly = void Function(int value); // 定义一个类型(方法),该方法需要传入一个int参数
void main(){Bird bird = Bird((int a){print(a);});//如果实参函数的类型不是该类型的话 编译不通过bird.fly(3);
}class Bird{Fly fly;Bird(this.fly);
}
12、flutter 输入框TextField
//输入框焦点
final FocusNode _focusNode = new FocusNode();
//编辑控制器
final TextEditingController _textEC = new TextEditingController();//文本输入框获取焦点
void _textFieldGetFocus() {FocusScope.of(context).requestFocus(this._focusNode);
}//文本输入框失去焦点
void _textFieldLoseFocus() {this._focusNode.unfocus();
}
13、flutter 关键字解析extends、with、implements
extends:继承Class
with:混入Class
implements:实现Class 这三种关系可以同时存在,但是有前后顺序: extends - with- implements extens在前,with在中间,implements最后
14、flutter mixin
mixin应该怎么理解呢,对Java系出身的我来说,这是一个新概念,各类资料的介绍也没找到一个清晰的定义。从个人理解来看,可以把它想象为Kotlin中的接口(和Java的区别是可以带非抽象的属性和方法),而多个mixin可以相互覆盖以实现组合,提供了非常大的灵活性,也可以达到类似多重继承的效果。
最简单的mixin
mixin TestMixin {void test() {print('test');}int testInt = 1;void test2();
}class Test with TestMixin {
@override
test2() {
print('test2');
}
}void main() {
Test().test(); // test
print(Test().testInt); // 1
Test().test2(); // test2
}
15、flutter 在widget树中获取state对象
通过Context获取
// 查找父级最近的Scaffold对应的ScaffoldState对象ScaffoldState _state = context.findAncestorStateOfType<ScaffoldState>()!;通过GlobalKey获取
//定义一个globalKey, 由于GlobalKey要保持全局唯一性,我们使用静态变量存储static GlobalKey<ScaffoldState> _globalKey= GlobalKey();ScaffoldState _state = _globalKey.currentState;
16、flutter WidgetsBindingObserver
需要判断程序的前后台状态,这里主要使用WidgetsBindingObserver
进行判断
class _MyAppState extends State<MyApp> with WidgetsBindingObserver{@overridevoid initState() {super.initState();WidgetsBinding.instance.addObserver(this); //添加观察者}@overridevoid dispose() {super.dispose();print('YM--------dispose');WidgetsBinding.instance.removeObserver(this); //添加观察者}
17、flutter eventbus
//EventBusUtil.fire是发送eventbus,EventBusUtil.listen是接收eventbusclass EventBusUtil{static EventBus _eventBus;//获取单例static EventBus getInstance(){if(_eventBus == null){_eventBus = new EventBus();}return _eventBus;}//返回事件的订阅者static StreamSubscription<T> listen<T extends Event>(Function(T event) onData){if(_eventBus==null){_eventBus=EventBus();}//内部流属于广播模式,可以有多个订阅者return _eventBus.on<T>().listen(onData);}//发送事件static void fire<T extends Event>(T e) {if(_eventBus == null){_eventBus = EventBus();}_eventBus.fire(e);}
}abstract class Event {}
18、Flutter Callback
class CallMainPage extends StatefulWidget {/// 传递的参数final Map params;CallMainPage({Key key, this.params}) : super(key: key);@override_CallMainPageState createState() => _CallMainPageState();
}class _CallMainPageState extends State<CallMainPage> {
// 进来先走 initstate,再走 Widget build
// 再走 initstate里面的Future.delayed方法@overridevoid initState() {Future.delayed(Duration(milliseconds: 250), () {this.getDefaultStoreInfo(null, () {//callback处理});});super.initState();}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn null;}void getDefaultStoreInfo(context, Function callBack) {Map<String, dynamic> params = new Map<String, dynamic>();if (callBack != null) {callBack();}}
}
19、flutter List<Widget>
/// 数据主页面
Widget _buildDataWidget() {return Container(height: this.fixedHeight,child: Column(mainAxisAlignment: MainAxisAlignment.start,mainAxisSize: MainAxisSize.max,crossAxisAlignment: CrossAxisAlignment.center,children: _groupWidgetList(),));
}/// 主页面 header、body、bottom
List<Widget> _groupWidgetList() {// headerWidget headerWidget = Container(padding: EdgeInsets.only(left: 12.0,right: 12.0,top: 15.0 + this.widget.barHeight,bottom: 25),child: buildCommonHeader(20,"我是header","更多",() {MMHomePageEvent().open(this.widget.realTimeGeneralModel?.scheme);},displayNameColor: Colors.white,promoNameColor: ColorUtils.hexStringColor("#FFFFFF", alpha: 0.7),onLeadingTap: () {MMFHomePageSheet.showQuestionDetailSheet(context,titleName: "我是数据",realTimeGeneralList: this.realTimeGeneralList);}));// 内容部分Widget bodyWidget = Expanded(child: GridView.builder(padding: EdgeInsets.only(top: 2),physics: NeverScrollableScrollPhysics(),shrinkWrap: true,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,mainAxisSpacing: 18,crossAxisSpacing: 20,childAspectRatio: childAspectRatio,),itemBuilder: (context, index) {return _buildSaleItem(this.realTimeGeneralList[index]);},itemCount: this.realTimeGeneralList.length),);// 底部Widget bottomWidget = InkWell(child: Container(padding: EdgeInsets.only(bottom: 16.0),width: MediaQuery.of(context).size.width,height: 25.0 + 10.0 + 16.0,color: Colors.transparent,child: Center(child: Image.asset(R.asset_home_icon_arrow,width: 25,height: 10,fit: BoxFit.cover,alignment: Alignment.topCenter,))),onTap: _updadeIsExpand,);List<Widget> list = [];list.add(headerWidget);list.add(bodyWidget);list.add(bottomWidget);return list;
}
Flutter 相关知识点相关推荐
- 卫星轨道推演计算相关知识点总结(含欧拉角、旋转矩阵、及各坐标系转化等)
来源:轨道机动算法的C++实现_shirro123的专栏-CSDN博客 卫星轨道推演计算相关基础知识点总结 一.卫星的运动特性 二.卫星的空间坐标系 ...
- 水下机器人_相关知识点
485转232 SP3485的管脚及功能: Pin1.RO 接收器输出 Pin2.RE 接收器输出使能(低电平有效) Pin3.DE 驱动器输出使能(高电平有效) Pin4.DI 驱动器输入 P ...
- js 闭包及其相关知识点理解
本文结合个人学习及实践,对闭包及相关知识点进行总结记录,欢迎读者提出任何不足之处 一.js变量 二.作用域(scope) 三.[[scope]] 和 scope chain 四.作用域(scope)和 ...
- Redis:相关知识点纵观
这篇文章先简单的介绍一下redis有什么相关知识点,然后再从接下去的一些文章对一些重要的知识点进行总结. 一.Redis 是什么 Redis 是速度非常快的非关系型(NoSQL)内存键值数据库,可以存 ...
- 网络流量队列优先级相关知识点
网络流量队列优先级相关知识点 Qdisc(quick disconnect)快速分离,断开;是一种排队规则,实现对流量的优先级管理. 涉及随机公平队列,令牌桶过滤器,分层令牌桶,FIFO, /* *C ...
- Linux安装和管理程序的相关知识点
Linux安装和管理程序的相关知识点 一.Linux应用程序基础 1.应用程序与系统命令的关系 2.典型的应用程序结构 3.常见软件包封装类型 二.RPM软件包管理工具 1.RPM包管理工具 2.RP ...
- rem和css3的相关知识点
☆☆☆rem和css3的相关知识点☆☆☆ 一. Web front-end development engineer rem是根据页面的根元素的font-size的一个相对的单位,即 html{ fo ...
- 一次kafka的offset回退事件及相关知识点
一次kafka的offset回退事件及相关知识点 原文链接:https://blog.csdn.net/lkforce/article/details/83384747
- CSS相关知识点:6种清除浮动和BFC
文章目录 CSS相关知识点:6种清除浮动和BFC 一.6种清除浮动 1.场景 2.原因 3.清除浮动 (1).给父级设置对应的高度 (2).给父级增加定位absolute (3).将父级也设计成浮动 ...
最新文章
- 知乎2w人关注,没有工程开发经验的人是怎么找到工作的?
- TCP连接的建立和终止
- Windows Management Instrumentation WMI Security Technology Learning
- Apache Spark源码走读之6 -- 存储子系统分析
- How to monitor your mobile application network traffic in your own LAPTOP
- 直方图(信息学奥赛一本通-T1115)
- 34 FI配置-财务会计-应收账款和应付账款-定义应付汇票的备选统驭科目
- ubuntu mysql 数据_Ubuntu下MySQL数据库使用
- 编程修养 阅读笔记一
- Javascript第四章函数function也是数据类型第六课
- 第四周 项目中的白盒测试
- CSS/HTML/JS
- 基于ASP的高校宿舍管理系统设计与实现
- 使用计算机辅助翻译,计算机辅助翻译方法
- 什么是jsp,什么是Servlet?jsp和Servlet有什么区别?
- 抖音短视频创业,抖音机房怎么样搭建?有哪些技巧
- python禅语_42:对象、类、以及从属关系
- uniapp引用外部在线js
- Unity中SetPassCall, Batches的区别,它们与Draw call 的关系
- 条件概率、全概率、先验概率、后验概率、类条件概率
热门文章
- Electric Fences_usaco3.4_皮克定理
- semi-colon expectedcss(css-semicolonexpected)报错解决
- 直击进博会 | 丹佛斯、法孚、诺华、诺和诺德、波士顿科学、欧加隆、冯氏集团、阿迪达斯等在华签约合作...
- 如何学好计算机英语怎么说,如何学好英语翻译
- 【CSS】字体、行高、文本对齐
- 重构碎片化知识_《碎片化与重构》之如何整合知识碎片
- 【产品经理】PRD文档经验
- Spring中@Primary注解
- 如何安装 Composer
- QT调用IE浏览器COM插件完成网页浏览