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。
构造函数
const Expanded({ Key key, int flex = 1, @required Widget child, })复制代码
- flex 分配空间的弹性系数,
Row
,Column
或Flex
的每个Expanded的flex构成空间分配的比例,默认int flex = 1
- child 即需要分配的子Widget
示例代码
// expandimport 'package:flutter/material.dart';class ExpandedLearn extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('Expand') ), body: Row(children:[ // 根据 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]), ), ) ) ], ) ); }}复制代码