前言
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:按照第一行文字基线对齐。
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,
),
),
],
),
),
)
],
),
)
)
);
}
}