常用widget的默认大小
- container 没有child 尽可能大,有child尽可能小
- center 尽可能的大的撑满父组件
- padding 包裹内容
- stack 尽可能的大
- Row,Column 通过 mainAxisSize属性设置大小
UI布局组合
- Scaffold MD 局部结构组合组件,支持drawer,snackbar
- Appbar 工具栏
-DefaultTabController + TabBar(Tab)+TabBarView 水平选项卡,动画效果不错
- BottomNavigationBar+BottomAppBar 底部导航条
- MaterialApp 根布局使用
单个child组件
- Padding 忽略margin的使用,全用padding代替
- Center,Align 内容校准,设置child的对齐方式,默认自己大小跟child大小一致。widthFactor,heightFactor,可用来设置自己大小和child的大小比例。
- Opacity 透明组件
- Expanded 等分组件 flex来设置比例,父组件必须是Flex,Row,Column
- GestureDetector 让Widget支持点击事件处理
- AspectRatio 宽高比例控件
- OverflowBox 运行child超出parent显示
- SizedBox 强制child为Sizebox的大小,不设置child自己调整
- FractionallySizedBox 根据现有布局调整child大小,child设置的大小无效
- SizedOverflowBox 可以溢出约束
- Transform 矩阵变化,平移,旋转缩放等
- Offstage 控制子widget的显示和隐藏
- SafeArea 自动添加状态栏高度padding-top高度
多child组件
- Stack 允许其子widget堆叠显示
- IndexedStack一个子widget列表中显示单个孩子的Stack(首次加载所有child都走了build,但都没有绘制到界面上,然后在根据显示的index,走绘制对应的child,可见widget的构建和绘制并非同步)
- ListView 三种构造:1.ListView.builder 创建滚动到屏幕上的Item 2.ListView 标准构造会将所以item 一次性创建
- GridView 跟ListView差不多
- Row,Column, 父组件是Flex 相当于LinearLayout
- Wrap 多行/列展示,类似标签功能,可以自动换行
-Stack 相当于 FrameLayout
- SingleChildScrollView 相当于ScrollView
Flutter 在无AppBar的时候,ListView需要全屏展示时,内容会自动有个padding-top 高度,是状态栏高度,
必须手动设置padding=0即可去除自带的内容padding-top
SafeArea 在自定义状态栏的时候很有用
其他链接