20.3.6 五
Flutter三层树结构
Element
知识内容
- Button-Image-TextField
Button: 小知识点的补充
Button的小间距, 没有完全放在左上角
默认有间距, 属性 MaterialTapTargetSize 默认48 垂直方向
设置成紧缩, shrinkWrap
Column中心对齐 文本1和2占据的空间不一样
默认情况下Button上下有一定的间距
没有内容的时候Button有尺寸, Button如何变小
文档看默认值
Flat buttons have a minimum size of 88 36
继承自 MaterialButton build方法
上下文包裹Button
ButtonTheme(
minWidth: 30,//最小宽度
height: 30
)
去除Button的内边距
Image补充2个知识点
占位图的问题
FadeInImage默认淡入淡出效果
milliseconds传0会报错, 传1图片缓存问题
flutter默认会对图片进行缓存
图片和缩放都一致的时候, 直接使用之前的图片
最多缓存1000张图片, 最大100M
iOS中内存占用内存过大, iPhone直接杀死App
Icon的补充
IconData
Icon字体图标和图片图标
- 字体图标矢量图(放大的时候不会失真) size: 300
- 字体可以设置颜色
- 图标很多时, 占据的空间会更小
自己来创建IconData, 0xe91d 传进来的是16进制数字
Text("0xe91d"), 不能显示图标?
- 0xe91d -> unicode编码 \ue91d
- 设置对应的字体 fontFamily
TextField
Dart中所有类继承自Object
Material风格
点击登录获取输入框里的东西
SizedBox调整间距
怎么设置按钮的宽度和高度? 没有width和height
Container包裹按钮, 按钮子元素填充Container
- 获取用户名和密码
声明式编程, 很少专门搞一个引用 => Controller
全局变量里面 usernameTextEditController
TextField的controller属性
边框颜色 Theme()包裹, child中设置TextField data:
Color white 颜色常量
Color()xff ff ff ff)
Color.fromRGBO()
Colors.red[100], 为什么有[], => 运算符冲在 ColorSwatch中
FlatButton设置颜色没用
叶子Widget
所有的Widget最终形成一个树
LeafRenderObject
2. 布局Widget
官方文档, 布局组件特别多
Flutter很少用Rect设置位置
Align
Center的源码 常量构造方法 传给的所有属性都传给了父类Align, 没有做任何的改变
为什么搞个Align就居中了?
Align是占据屏幕整个区域的
单子组件
alignment: Alignment(0, 0)中心点 左上角-1, -1, 支持小数
Container包裹Align, Align设置widthFactory没反应
widthFactory child的size倍数
Center相当于不设置AlignAlignment的值
Padding
Dart2.0+ const可以省略
文字行高的概念
EdgeInsets.all()全部加内边距
EdgeInsets.symmetric(vertical: 5)
EdgeInsets.only(bottom: 10)
Container
child是多大Container就是多大
Flutter的布局方式, 最终形成的是一个树结构
RenderWidget(父Widget) -> RenderObject
constraints: 约束 BoxConstraints(minWidth: maxWidth ...) 传递给子组件
子组件根据父组件给的约束调整自己的大小, 之后报告给父组件调整大小, 超出会出现黄色警告
不同的子组件有不同的表现
alignment
padding设置边距
margin: EdgeInsets.all(10) 外边距
transform: Matrix4.rotationZ(50) 旋转 工厂构造方法
decoration: BoxDecoration() 跟color属性冲突, 只能提供一个
提供一个color的时候本质是在创建decoration
BoxDecoration(
color: ,
border: Border.all(
width:
color
),
borderRadius: BorderRadius.circular(50),//设置圆角
boxShadow: [
BoxShadow(color: Colors.blue, offset: Offset(10, 10), spreadRadius),
BoxShadow(color: Colors.red, offset: Offset(10, 10), spreadRadius)
]
)
Container是很多组件的大杂烩
如果没有设置alignment,