20.3.4 三
MaterialApp home可以是StatefulWidget
StatelessWidget改成StatefulWidget
- 将build出来的widget抽取到一个单独的Widget中
JHHomeContent打印了很多的生命周期函数
官网文档
api.flutter.dev/flutter/widgets/State-class.html
didUpdateWidget 8:10-8:22 网络不好在Android Studio里面运行Flutter项目多打印
VSCode中不会执行两次
二. Flutter的编程范式
- 命令式编程:一步一步给计算机命令, 告诉它我们想做什么事情
一步一步设置frame - 声明式编程: 描述目标应该长什么样子
依赖一些框架: 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("本地图片地址"),
- 在Flutter项目中创建一个文件夹, 存储图片
- 在pubspec.yaml进行配置
assets:前的空格要删除
要执行Packages get - 使用图片
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/ 通用, 加载里面所有的资源
