Flutter 布局集合

2,061 阅读2分钟

常用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 在自定义状态栏的时候很有用

其他链接