【笔记】Flutter的线性布局组件
前言
Flutter的线性布局组件学习笔记
线性布局组件
- Row和Column继承自Flex
Row行组件
- 主轴方向是从左到右,侧轴方向是从上到下
- 行组件宽度是自适应的,默认占满一行
- 对于行组件,只有定义了行组件的高度,侧轴的排列方式才有意义
mainAxisAlignment
:主轴排列方式
MainAxisAlignment.start
:缺省值,居首显示MainAxisAlignment.center
:居中显示MainAxisAlignment.end
:居尾显示MainAxisAlignment.spaceBetween
:分散显示,首尾距离边距无边距MainAxisAlignment.spaceEvenly
:分散显示,首尾距离边距有边距,中间间距是两边间距的1倍MainAxisAlignment.spaceArount
:分散显示,首尾距离边距有边距,中间间距是两边间距的2倍
crossAxisAlignment
:侧轴排列方式
CrossAxisAlignment.start
:缺省值,居首显示CrossAxisAlignment.center
:居中显示CrossAxisAlignment.end
:居尾显示CrossAxisAlignment.spaceBetween
:分散显示,首尾距离边距无边距CrossAxisAlignment.spaceEvenly
:分散显示,首尾距离边距有边距,中间间距是两边间距的1倍CrossAxisAlignment.spaceArount
:分散显示,首尾距离边距有边距,中间间距是两边间距的2倍
children
:组件子元素
1 | import 'package:flutter/material.dart'; |
Column列组件
- 主轴方向是从上到下,侧轴方向是从左到右
- 列组件高度是自适应的,默认占满一列
- 对于列组件,只有定义了列组件的宽度,侧轴的排列方式才有意义
1 | import 'package:flutter/material.dart'; |