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

iseeyu2年前 (2024-02-21)推广123

image

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

image

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

image

总结

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

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的比例来分割主轴的全部空闲空间。

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

image

Flexible

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

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

三个控件flex都是1, 左图第三个控件是Flexible, 右图第三个控件是Expanded (其他属性一模一样)

image

可以看出:

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

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