Flutter控件布局 - Spacer, Flex , Expanded , Flexible, Padding

Spacer

初始状态

设置三个按钮,顺序排列

在AB两个按钮之间加一行 Spacer()

在BC两个按钮之间也加一行 Spacer()

总结

Spacer() 至关于弹簧的效果,使两个控件之间的距离达到最大值. (在页面不可滑动时才有效果)app

Flex

Flex 是 Row和Column的父组件. Flex组件能够沿着水平或垂直方向排列子组件，若是你知道主轴方向，使用Row或Column会方便一些，由于Row和Column都继承自Flex，参数基本相同，因此能使用Flex的地方基本上均可以使用Row或Column。Flex自己功能是很强大的，它也能够和Expanded组件配合实现弹性布局。布局

Expanded

能够按比例“扩伸” Row、Column和Flex子组件所占用的空间。字体

const Expanded({
  int flex = 1, 
  @required Widget child,
})

flex参数为弹性系数，若是为0或null，则child是没有弹性的，即不会被扩伸占用的空间。若是大于0，全部的Expanded按照其flex的比例来分割主轴的所有空闲空间。flex

以1:1:2:2的比例,排列A , 占位空白, B , C

child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: RaisedButton(
                color: Colors.yellow,
                splashColor: Colors.green,
                onPressed: () {},
                child: Text("A"),
                textColor: Color(0xffFfffff),
                padding: EdgeInsets.all(8),
                elevation: 5,
                highlightColor: Color(0xffF88B0A),
              ),
            ),
            Spacer(
              //Spacer的功能是占用指定比例的空间
              flex: 1,
            ),
            Expanded(
              flex: 2,
              child: RaisedButton(
                color: Colors.green,
                splashColor: Colors.green,
                onPressed: () {},
                child: Text("B"),
                textColor: Color(0xffFfffff),
                padding: EdgeInsets.all(8),
                elevation: 5,
                highlightColor: Color(0xffF88B0A),
              ),
            ),
            Expanded(
              flex: 2,
              child: RaisedButton(
                color: Colors.blue,
                splashColor: Colors.blue,
                onPressed: () {},
                child: Text("C"),
                textColor: Color(0xffFfffff),
                padding: EdgeInsets.all(8),
                elevation: 5,
                highlightColor: Color(0xffF88B0A),
              ),
            ),
          ],
        ),
      ),

Flexible

Flexible是一个控制Row、Column、Flex等子组件如何布局的组件。ui

Flexible组件可使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如，Row在水平方向，Column在垂直方向)，可是它与Expanded组件不一样，它不强制子组件填充可用空间。url

三个控件flex都是1, 左图第三个控件是Flexible, 右图第三个控件是Expanded (其余属性如出一辙) .net

能够看出:code

**Row、Column、Flex会被Expanded撑开，充满主轴可用空间. **blog

Flexible并不会强制子组件填充可用空间,子组件实际大小是多少,它就是多大.继承

特别注意

Expanded、Flexible只在Row、Column组件使用。

Expanded、Flexible在“Container、Padding、Stack”组件中会报错: The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type Fle

Padding

Padding可容纳一个子组件,添加自身内边距来限制孩子组件的占位,核心属性为padding.

Container(
                color: Colors.red,
                width: 200,
                height: 150,
                child: Padding(
                  padding: EdgeInsets.all(20),
                  child: RaisedButton(
                    color: Colors.blue,
                    splashColor: Colors.blue,
                    onPressed: () {},
                    child: Text("C"),
                    textColor: Color(0xffFfffff),
                    padding: EdgeInsets.all(8),
                    elevation: 5,
                    highlightColor: Color(0xffF88B0A),
                  ),
                ),
              ),

关于Padding和Expanded

对于有着固定间距的视觉元素，能够经过 Padding 对其进行包装.
对于大小伸缩可变的视觉元素，能够经过 Expanded 控件让其填充父容器的空白区域