flutter 常用布局方式

一、单子 Widget 嵌套布局：

单子 Widget是指只有一个子组件的Widget，这样布局Widget有三个：Container、Padding、Center

---

1、Container

Container，是一种允许在其内部添加其他控件的控件，也是 UI 框架中的一个常见概念。
在 Flutter 中，Container 本身可以单独作为控件存在（比如单独设置背景色、宽高），也可以作为其他控件的父级存在：Container 可以定义布局过程中子 Widget 如何摆放，以及如何展示。与其他框架不同的是，Flutter 的 Container 仅能包含一个子 Widget。

先简单写一个Container，尺寸200x200；在内部居左上放一个子Container，尺寸80x80

• 代码如下：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: _container(), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

 Container _container(){
    return Container(
      width: 200,
      height: 200,
      color: Colors.yellow,
      alignment: Alignment.topLeft,
      child: Container(
        color: Colors.red,
        width: 80,
        height: 80,
      ),
    );
  }

• 展示效果：
  

a、padding

padding可以理解为是Container的"内边框"，他会影响内部子控件的位置，示例代码：

  Container _container(){
    return Container(
      width: 200,
      height: 200,
      padding: EdgeInsets.all(20),
      color: Colors.yellow,
      child: Container(
        color: Colors.red,
      ),
    );
  }

上面代码把子Container的宽高限制去掉，这样它就可以尽可能的充满父Container，但是父Container有padding，导致它无法充满，效果如下：

b、margin

margin可以理解为是Container