flutter之Flex布局

Flex 布局

flex 布局类似于 H5 中的 flex,较为简单,主要有以下几点

布局的基本要义

flex 中需要定义布局方向,其direction的取值分别为Axis.horizontal (水平布局)与Axis.vertical(垂直布局),flex 布局继承自MutipleChildrenRenderObjectWeight,其对应的 renderObject 为RenderFlex

👇 这个例子简单描述了 flex 的基本使用.其中,Expanded组件仅用于 Flex 中,当然也包括Row与Column.毕竟,这两个是 Flex 的封装

Flex(direction:Axis.horizontal,children:[
    Expanded(child:Container(color:Colors.red),flex:1),
    Expanded(child:Container(Color:Colors.blue[200]),flex:2)
])

👇 而这个例子则表明了 Flex 在垂直布局中的使用

Flex(direction:Axis.vertical,children:[
    Expanded(child:Container(color:Colors.red),flex:1),
    Spacer(flex:1), // Expanded的便捷封装
    Expanded(child:Container(color:Colors.blue[200]),flex:1)
])

⚠:以上例子有个重要问题,没有指定 Flex 高度,编辑器将报错,我们可以在外套一层SizedBox,显式指定即可.

每日单词拼写