Row
1. 简介
在 Flutter 中非常常见的一个多子节点控件,将 children 排列成一行。估计是借鉴了 Web 中 Flex 布局,所以很多属性和表现,都跟其相似。但是注意一点,自身不带滚动属性,如果超出了一行,在 debug 下面则会显示溢出的提示。
2. 属性
MainAxisAlignment:主轴方向上的对齐方式,会对 child 的位置起作用,默认是 start。
其中 MainAxisAlignment 枚举值:
- center:将 children 放置在主轴的中心;
- end:将children放置在主轴的末尾;
- spaceAround:将主轴方向上的空白区域均分,使得children之间的空白区域相等,但是首尾child的空白区域为1/2;
- spaceBetween:将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾child都靠近首尾,没有间隙;
- spaceEvenly:将主轴方向上的空白区域均分,使得children之间的空白区域相等,包括首尾child;
- start:将children放置在主轴的起点;
其中 spaceAround、spaceBetween 以及 spaceEvenly 的区别,就是对待首尾 child 的方式。其距离首尾的距离分别是空白区域的1/2、0、1。
MainAxisSize:在主轴方向占有空间的值,默认是max。
MainAxisSize的取值有两种:
- max:根据传入的布局约束条件,最大化主轴方向的可用空间;
- min:与max相反,是最小化主轴方向的可用空间;
CrossAxisAlignment:children在交叉轴方向的对齐方式,与MainAxisAlignment略有不同。
CrossAxisAlignment枚举值有如下几种:
- baseline:在交叉轴方向,使得children的baseline对齐;
- center:children在交叉轴上居中展示;
- end:children在交叉轴上末尾展示;
- start:children在交叉轴上起点处展示;
- stretch:让children填满交叉轴方向;
TextDirection:阿拉伯语系的兼容设置,一般无需处理。
VerticalDirection:定义了children摆放顺序,默认是down。
VerticalDirection枚举值有两种:
- down:从top到bottom进行布局;
- up:从bottom到top进行布局。
top对应Row以及Column的话,就是左边和顶部,bottom的话,则是右边和底部。
TextBaseline:使用的TextBaseline的方式,有两种,前面已经介绍过。
3. 实例
1. 效果图
2. 代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('线性布局'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.blue,
child: FlutterLogo(
size: 50.0,
),
),
Container(
color: Colors.pink,
child: FlutterLogo(
size: 50.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 50.0,
),
),
],
),
)
)
);
}
}
Column
1. 简介
Column 是一个用于垂直展示多个子控件的控件。Column 这个控件不会滚动。如果你有一行控件在空间不足的情况下可以滚动,考虑使用 ListView 类。
构造函数如下:
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
注:Row 和 Column 都只会在主轴方向占用尽可能大的空间,而纵轴的长度则取决于他们最大子元素的长度
2. 属性
属性和 Row 一样。
3. 实例
1. 效果图
2. 代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('线性布局'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.blue,
child: FlutterLogo(
size: 50.0,
),
),
Container(
color: Colors.pink,
child: FlutterLogo(
size: 50.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(
size: 50.0,
),
),
],
),
)
)
);
}
}