20.3.4 三

1. MaterialApp home可以是StatefulWidget

2. StatelessWidget改成StatefulWidget

3. 将build出来的widget抽取到一个单独的Widget中

4. JHHomeContent打印了很多的生命周期函数
   官网文档
   api.flutter.dev/flutter/widgets/State-class.html
   didUpdateWidget 8:10-8:22 网络不好

5. 在Android Studio里面运行Flutter项目多打印
   VSCode中不会执行两次

二. Flutter的编程范式

1. 命令式编程:一步一步给计算机命令, 告诉它我们想做什么事情
   一步一步设置frame
2. 声明式编程: 描述目标应该长什么样子
   依赖一些框架: Vue React Flutter
   配置信息
   Column告诉框架垂直排布
   特殊的地方写好数据

前端的编程范式

jquery、原生JS 命令式编程
VueJS 声明式编程
vue、react、angular 声明式编程
2009年开始, 声明式编程就开始流行起来
SwiftUI, 苹果开发模式转向声明式编程
声明式编程更简单, 逻辑更清晰
慢慢来体会

基础的Widget

1.1 文本Widget

Text() 不能设置宽度
不居中是因为没有不存在宽度
maxLines: 2, 最大行数
overflow: TextOverflow.ellipsis, 最后显示...
textScaleFactor: 1.5, 缩放1.5倍
TextStyle

1.2 富文本显示

Text Widget -> RenderWidget 不是最终渲染的Widget
RichText widgets require a Directionality widget ancestor.
最终渲染的是build出来的东西
RichText extends MultiChildRenderObjectWidget
开发中: 富文本

Text.rich(
    TextSpan(

    )
)

咸鱼boost_flutter框架

2.1按钮的基础

RaisedButton凸起的Button
必传参数和@required: 必传参数不穿就会报错(编译不通过)
@required编译可以通过, 但是会报警告
onPressed: () {}, 不传是disabled
两种办法改变颜色

FlatButton, 扁平的按钮

OutlineButton, 边框按钮

FloatingActionButton, 悬浮的按钮, 一直浮着

既有图标又有文本的按钮, 自定义Button
FlatButton(
child: Row(
children:
)
)
FlatButton为什么占据整行, Row占据整行
mainAxisSize: MainAxisSize.min,
Column主轴, 交叉轴
圆角: ShapeBorder 抽象类
RoundedRectangleBorder(
borderRadius
)

MaterialButton
Button也不是一个直接渲染的Widget

三. 图片Widget

Image.network/asset
ImageProvider 抽象类, 看看有哪些实现类
AssetImage
NetworkImage
抽象类在什么情况下实例化? 有工厂方法的时候, 工厂方法里面去调用另一个子类的东西
width: 200, 设置图片宽度
height: 200, 设置成200, 看起来不是200, 填充模式
fit: BoxFit.fill,
fitWidth 宽度一定, 高度自适应
fitHeight 高度一定, 宽度自适应
alignment: Alignment.centerLeft, 对齐
Alignment(x, y) 左上角(-1, -1), 右下角(1, 1) 中心(0, 0)
(0, -2), 跑出去了
color: 颜色混入
fit 和 repeat一起使用, 重复填充

加载本地图片
image: AssetImage("本地图片地址"),

1. 在Flutter项目中创建一个文件夹, 存储图片
2. 在pubspec.yaml进行配置
   assets:前的空格要删除
   要执行Packages get
3. 使用图片

assets文件夹
iamges文件夹
fonts
iOS图片类型怎么区分?
@1x放在外面
2.0x文件夹
3.0x文件夹

44行 注释打开, 空格删除
assets:
- assets/images/juren.jpeg
- assets/2.0x/juren.jpeg
- assets/3.0x/juren.jpeg
执行 flutter packeges get 依赖重新安装一下
没有配置2x图片就删除依赖

• assets/images/ 通用, 加载里面所有的资源