Flutter 基础布局Widgets之Expanded详解

98 阅读 0 评论 65 点赞

我是靠谱客的博主幽默太阳，这篇文章主要介绍Flutter 基础布局Widgets之Expanded详解，现在分享给大家，希望可以做个参考。

Expanded概述

Expanded是用于展开Row，Column或Flex的子child的Widget。使用Expanded可以使[Row]，[Column]或[Flex]的子项扩展以填充主轴中的可用空间（例如，水平用[Row]或垂直用[Column]）。如果扩展了多个子节点，则根据[flex]因子将可用空间划分为多个子节点。
[Expanded]小部件必须是[Row]，[Column]或[Flex]的后代，并且从[Expanded]小部件到其封闭的[Row]，[Column]或[Flex]的路径必须包含只有[StatelessWidget]或[StatefulWidget] s（不是其他类型的小部件，如[RenderObjectWidget]）。
使用场景比如在之前的demo中用到的，列表单词和按钮的空白处理，可以利用expanded对各个widgets合理分配弹性空间，而不是用positioned这样的固定widget位置的方式分配，其关键分配参数就是Flex。

构造函数

复制代码

1
2
3
4
5
6
const Expanded({
Key key,
int flex = 1,
@required Widget child,
})

flex 分配空间的弹性系数，Row，Column或Flex的每个Expanded的flex构成空间分配的比例，默认int flex = 1
child 即需要分配的子Widget

示例代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// expand
import 'package:flutter/material.dart';
class ExpandedLearn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Expand')
),
body: Row(children: <Widget>[
// 根据 flex系数，分配剩余空间
Expanded(
flex:2,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
),
)
),
Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(colors: [Colors.red, Colors.orange]),
),
)
)
],
)
);
}
}