20.3.6 五

Flutter三层树结构
Element
知识内容

1. 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个知识点

1. 占位图的问题
   FadeInImage默认淡入淡出效果
   milliseconds传0会报错, 传1

2. 图片缓存问题
   flutter默认会对图片进行缓存
   图片和缩放都一致的时候, 直接使用之前的图片
   最多缓存1000张图片, 最大100M
   iOS中内存占用内存过大, iPhone直接杀死App

Icon的补充
IconData
Icon字体图标和图片图标

1. 字体图标矢量图(放大的时候不会失真) size: 300
2. 字体可以设置颜色
3. 图标很多时, 占据的空间会更小
   自己来创建IconData, 0xe91d 传进来的是16进制数字
   Text("0xe91d"), 不能显示图标?

• 0xe91d -> unicode编码 \ue91d
• 设置对应的字体 fontFamily

TextField
Dart中所有类继承自Object
Material风格

点击登录获取输入框里的东西
SizedBox调整间距
怎么设置按钮的宽度和高度? 没有width和height
Container包裹按钮, 按钮子元素填充Container

1. 获取用户名和密码
   声明式编程, 很少专门搞一个引用 => 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,