万物皆是Widget
一般缩进2个空格
文字居中 Widget Center()
MaterialApp使用Meterial风格
Scaffold脚手架 帮助我们快速的搭建页面
传appBar body
刚开始分不清那里写, 那里写;
一条语句结束之后写的是;
属性直接用,
ctrl + R 启动
Widget:
StatefulWidget有状态的Widget: 在运行过程中有一些状态(data)需要改变
StatelessWidget 内容是确定没有状态(data)的改变
先用StatelessWidget
build方法
build方法什么时候被执行?
重构
一行代码, 箭头函数
- 最终形成的是Widget树
- 组件化开发的思想 跟VUE、React很像
VUE、React: 样式和结构进行分离
代码规范, 划分清晰
Center居中
Row相对于Center是居中的
Row的内容还要居中
CheckBox
@required: 必须的, 注解告诉某些可选命名参数是必须的, Flutter中才有
命名可选参数对顺序没有要求, 可忽略顺序
点击的时候发生改变
var flag = true;
本身就是错误的代码
This class immutable不可变的类
@immutable关键字, 告诉当前这个类一旦创建后定义的所有的东西都是不可变的使用final
StatelessWidget: 无状态的Widget
StatefullWidget:
flag: 状态
android/iOS 命令式变成, 不说状态, 属性、数据
VUE... 声明式变成 管好状态
flutter开发中, 所有的Widget都不能定义状态
StatefulWidget是Widget也不能定义状态 -> 创建一个单独的类, 这个类负责管理状态
抽象方法必须实现
没有命名冲突, this可以省略
setState(){};回调函数中改变状态, 监听改变, 刷新界面
React虚拟DOM
当前的State里面继承过来的 本质是this.state()
Flutter借鉴了很多React的思想
构造方法传入很多的参数
StatelessWidget案例
StatefulWidget案例
垂直排布Column
所有的数据暂时都是写死的
child, 单个
children, 多个
展示的数据是不一样的 -> 需要传过来一些参数
Widget中定义的所有成员变量应该是final的
显示网络图片, 异步加载, 有专门的IO线程 Image.network(imageURL)
下面显示一个黄条, Flutter里面的重点
黄条: 在Fultter里面, 内容超出了屏幕的可显示区域,
而你又没有设置父Widget滚动, 就会显示
安全区域 relayoutBoundary布局边界
Flutter中的布局跟iOS、Android不一样
解决办法, 超出后变成可滚动的Widget
ListView, 传入children
变量放在不同的地方, 不同的含义, build执行的时候就会创建变量
希望有间距
Flutter, 中间插入组件, 有很多种办法
SizedBox(height: 8), 相当于8个像素, 像素适配rpx, 相当于iOS中的点像素
边框
给Column包裹一个Container
decoration 装饰
BoxDecoration boder
Border.all(
width,
color
)
内容都是自动居中显示
不想让居中显示,
文本 textAlignLTextAlign.right 不起作用
不是因为文本, 包裹内容, 只有那么大
Column, 主轴上面垂直排布,
交叉轴 crossAxisAlignment
flex布局
Column、Row、Flex
Column垂直方向就是一个主轴
Row水平方向是主轴
Flex决定主轴和交叉轴
StatefulWidget做个案例
计数器案例, 有状态的改变 -> StatefulWidget
抽象方法createState返回StatefulWidget
做开头, 在其他库不能访问
Widget是不加下划线, 暴露给别人使用
State是加下划线_: 状态这个类只是给Widget使用, 自己使用
为什么Flutter在设计的时候StatefulWidget的build方法放在State中
- build出来的Widget是需要以来State中的变量(状态/数据)
- 在Flutter的运行过程中, Widget是不断地销毁和创建的,
当我们自己的状态改变时, 并不希望重新创建一个新的State
Widget相当于描述信息
child, children
只能放一个元素, 放数组多个元素
抽取方法, 返回Widget
Cloumn占据的是屏幕整个高度, 设置主轴居中
_counter+=放的位置,
看setState的实现
提前两三行或延后两三行代码执行
可以管理自己的状态
全局变量, 整个应用程序全部使用StatelessWidget来构建
不合理, 全局状态变得非常庞大, 耦合度太大
属于自己的状态, 自己管理
StatefulWidget使用父Widget传来的数据
this.widget
普通情况下this都可以省略, 有冲突的时候不可以省略
生命周期
hook回调, 钩子函数, 某一刻调用这个函数
生命周期的函数对于开发者意义是什么?
- 初始化一些数据, 变量, 状态
- 发送网络请求, 要知道widget什么时候创建完了创建网络请求
- 进行一些事件的监听, controller添加监听事件
- 管理内存: 一些定时器、controller手动进行销毁
Flutter里面只需要监听Widget的生命周期
StatelessWidget的生命周期
StatelessWidget只需要监听构造函数、build方法被调用, 很少监听
调用了2次, AndroidStudio的bug?
VSCode运行只会调一次
StatefulWidget的生命周期
开发中用的最多的就是StatefulWidget的生命周期
不是一个类, 快捷stful
生成两个类
- Stateful Widget Widget.createState()
- State object
- constructor ...-> initState ...-> build ...-> dispose
init的super必须调用
初始化
不调会报警告, 注解限制 @mustCallSuper
setState做一个标记, 重新显示
小部件销毁和重建的过程
didChangeDependence
点击底部加号, 添加HYHomeContent, 让父Widget结构发生改变
final指向的引用不能改变, 里面是可以增加数据的
生命周期复杂版
dirty sate markNeedsBuild()
setSate中dirty false改成true build执行
