文章目录
一、Flutter 组件回顾
二、Center 组件
三、Wrap 组件
四、ClipRRect 组件
五、Stack 组件与 Positioned 组件
六、按钮组件组合
七、完整代码示例
八、相关资源
一、Flutter 组件回顾
Flutter 与布局相关的组件 :
Container : 容器组件 ;
RenderObjectWidget : 布局渲染相关组件 ;
SingleChildRenderObjectWidget : 单节点布局组件 ;
Opacity : 常用于修改组件透明度 ;
ClipOval : 裁剪布局组件 , 可以将布局裁剪成圆形 ;
ClipRRect : 裁剪布局组件 , 可以将布局裁剪成方形 ;
PhysicalModel : 将布局显示成不同的形状 ;
Align : 布局设置组件 , 一般设置布局居中操作 ;
Padding : 设置内边距的组件 ;
SizeBox : 用于约束布局大小的组件 ;
FractionallySizedBox : 约束布局水平 / 垂直方向的平铺操作 ;
MultiChildRenderObjectWidget : 多节点布局组件 ;
Stack : 相当于帧布局 FrameLayout ;
Flex :
Column : 相当于线性布局 , 垂直方向布局 , 组件从上到下摆放 ;
Row : 相当于线性布局 , 水平方向布局 , 组件从左到右 ;
Wrap : 该组件与 Row 组件类似 , Wrap 组件可以换行 ;
Flow : 不常用 ;
ParentDataWidget :
Positioned : 用于固定组件位置的组件 ;
Flexible : 用于约束组件在父容器中展开大小的组件 ;
二、Center 组件
widthFactor ( 宽度因子 ) 和 heightFactor ( 高度因子 ) 用于控制该组件的宽高 , 类型为 double 浮点型 ;
参数为空 : 如果参数为空 , 则填充整个布局 , 相当于 match_parent ;
参数不为空 : 如果参数不为空 , 则对应的宽高是 宽度/高度因子 × \times× 子组件高度 ;
代码示例 : 下面的代码中 , Center 没有设置宽高因子 , 默认为空 , 则该 Center 组件自动填充父容器 , 内部有一个 Widget 子组件 , 注意是单个子组件 ;
Center( child: Wrap() )
三、Wrap 组件
Column 组件是垂直方向的线性布局 , Row 组件是水平方向的线性布局 ,
Wrap 组件是在 Row 组件的基础上的水平线性布局 , 多了一个换行功能 , Wrap 组件可以有多行水平线性布局 ;
这是照片墙实现的主要组件 , Wrap 组件中由一组 Image 组件 List 集合作为子组件 ;
代码示例 :
// 可自动换行的水平线性布局 Wrap( // 设置水平边距 spacing: 间距值 ( double 类型 ), // 设置垂直间距 runSpacing: 间距值 ( double 类型 ), children: <Widget>[ 设置若干子组件 ] )
运行效果 : Center 组件填充整个屏幕 , Wrap 组件是 Center 的子组件 , 在中心显示 ;
参考博客 :
【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 ) 二、Row 和 Column 组件
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 ) 一、Wrap 组件
