Flutter弹性布局Flex使用及其相关属性详解

目录

Flex相关属性及其定义

direction

mainAxisAlignment 

crossAxisAlignment    

verticalDirection

textDirection

---

简介

弹性布局允许子widget按照一定比例来分配父容器空间，弹性布局的概念在其UI系统中也都存在，如H5中的弹性盒子布局，Android中的FlexboxLayout。Flutter中的弹性布局主要通过Flex和Expanded来配合实现，Flex是Row和Column的父类

Row和Column都只会在主轴方向占用尽可能大的空间，而纵轴的长度则取决于他们最大子元素的长度。

Flex相关属性及其定义

 Flex({
    Key key,
    //排版方向 必须的  分为 Horizontal 和 vertical
    @required this.direction,

    //主轴排版对齐方式 可选值有 start end center spaceBetween spaceAround spaceEvenly
    this.mainAxisAlignment = MainAxisAlignment.start,

    //主轴尺寸 基本用不到 max 即可
    this.mainAxisSize = MainAxisSize.max,

    //交叉轴排版对齐方式 start end center stretch baseline
    this.crossAxisAlignment = CrossAxisAlignment.center,

    //水平方向顺序  rtl  ltr
    this.textDirection,

    //垂直方向顺序 up down
    this.verticalDirection = VerticalDi