前言
Flutter 中的弹性布局主要通过 Flex 和 Expanded 来配合实现。
本篇文章主要介绍 Flutter 中的 Flex 布局。
Flex
1. 简介
Flex 组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用 Row 或 Column 会方便一些，因为 Row 和 Column 都继承自 Flex，参数基本相同，所以能使用 Flex 的地方基本上都可以使用 Row 或 Column 。
2. 属性
Flex 常用属性如下：
direction：设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，交叉轴与主轴方向垂直。
mainAxisAlignment：设置子 Widget 沿着主轴方向的排列方式，默认 MainAxisAlignment.start，可设置的方式如下：
- MainAxisAlignment.start：左对齐，默认值;
- MainAxisAlignment.end：右对齐;
- MainAxisAlignment.center：居中对齐;
- MainAxisAlignment.spaceBetween：两端对齐;
- MainAxisAlignment.spaceAround：每个 Widget 两侧的间隔相等，与屏幕边缘的间隔是其他 Widget 之间间隔的一半;
- MainAxisAlignment.spaceEvently：平均分布各个 Widget，与屏幕边缘的间隔与其他 Widget 之间的间隔相等.
mainAxisSize：设置主轴的大小，默认 MainAxisSize.max，可设置的值如下：
- MainAxisSize.max：主轴的大小是父容器的大小；
- MainAxisSize.min：主轴的大小是其资 Widget 大小之和。
将 mainAxisAlignment 设置成 spaceBetween，如果 mainAxisSize 设置为 max，则是整个 Row 宽度基础上按照 spaceBetween 的方式进行排列，如果 mainAxisSize 设置为 min，则是三个 Container 宽度之和范围内按照 spaceBetween 的方式进行排列。
crossAxisAlignment：设置子 Widget 沿着交叉轴方向的排列方式，默认 CrossAxisAlignment.center，可设置的方式如下：
- CrossAxisAlignment.start：与交叉轴的起始位置对齐；
- CrossAxisAlignment.end：与交叉轴的结束位置对齐；
- CrossAxisAlignment.center：居中对齐；
- CrossAxisAlignment.stretch：填充整个交叉轴；
- CrossAxisAlignment.baseline：按照第一行文字基线对齐。
扫描二维码关注公众号，回复：
14388658 查看本文章
verticalDirection：设置垂直方向上的子 Widget 的排列顺序，默认为 VerticalDirection.down，设置方式如下：
- VerticalDirection.down：start 在顶部，end 在底部；
- VerticalDirection.up：start 在底部，end 在顶部。
textBaseline：设置文字对齐的基线类型，可设置的值如下：
- TextBaseline.alphabetic：与字母基线对齐；
- TextBaseline.ideographic：与表意字符基线对齐；
Expanded
Expanded 可以按比例伸缩或扩展 Row、Column 和 Flex 子组件所占用的空间大小。
1. 属性
-
key
就是一个唯一标识符 -
flex
弹性系数
如果为 0 或 null，则 child 是没有弹性的，即不会被扩伸占用的空间。
如果大于 0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。
实例
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>[
Flex(
direction: Axis.horizontal,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
color: Colors.pink,
child: FlutterLogo(
size: 50.0,
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.green,
child: FlutterLogo(
size: 50.0,
),
),
),
],
),
Padding(
padding: EdgeInsets.only(top: 20.0),
child: SizedBox(
height: 100.0,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: 30.0,
color: Colors.blue,
),
),
Spacer(
flex: 1,
),
Expanded(
flex: 1,
child: Container(
height: 30.0,
color: Colors.green,
),
),
],
),
),
)
],
),
)
)
);
}
}