Flutter 基础布局Widgets之Expanded详解

141.jpg

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

示例代码

// 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]),

              ),
            )
          )
      ],
    )
    );
  }
}

示例效果

A63D8B78EEDFE82421521740EFBDA185.png