Flutter：Center（居中佈局），Padding（填充佈局），Align（對齊佈局）

Center （居中佈局）

在Center佈局中，子元素處於水平和垂直方向的中間位置。代碼如下：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container 佈局',
      home: LayoutDemo(),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Center'),
      ),
      body: Center(
        child: Text(
          'Hello Flutter',
          style: TextStyle(fontSize: 36),
        ),
      ),
    );
  }
}

Center屬性在通常情況下可直接添加子元素，不需要做額外屬性設置。

上述代碼的視圖如下：

Padding （填充佈局）

Padding 即爲填充組件，用於處理容器與其子元素之間的間距，與 Padding 屬性對應的是 margin 屬性，margin 處理容器與其他組件之間的間距。Padding 使用如下：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container 佈局',
      home: LayoutDemo(),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Center'),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.green, width: 8)),
          padding: EdgeInsets.all(30),
          width: 300,
          height: 300,
          child: Container(
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.blue, width: 8)),
            width: 200,
            height: 200,
            child: new FlutterLogo(),
          ),
        ),
      ),
    );
  }
}

上述代碼結果如下：

如果將 padding 值由30改爲 100

Align （對齊佈局）

Align 組件即對齊組件，能將子組件按照指定方式對齊，並根據子組件的大小調整自己的大小。Align 組件的屬性如下：

下面是一個例子：

• 在工程下新建一個 images 文件夾，然後放了幾張圖片
  
• 然後再配置文件 pubspec.yaml 文件下配置文件路徑
  

下面是代碼：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container 佈局',
      home: LayoutDemo(),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Center'),
      ),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: FractionalOffset(0.5, 0.5),
            child: Image.asset(
              'images/1.jpg',
              width: 120,
              height: 120,
            ),
          ),
          Align(
            alignment: FractionalOffset(0, 0),
            child: Image.asset(
              'images/2.jpg',
              width: 120,
              height: 120,
            ),
          ),
          Align(
            alignment: FractionalOffset.topRight,
            child: Image.asset(
              'images/3.jpg',
              width: 120,
              height: 120,
            ),
          ),
          Align(
            alignment: FractionalOffset.bottomLeft,
            child: Image.asset(
              'images/4.jpg',
              width: 120,
              height: 120,
            ),
          ),
          Align(
            alignment: FractionalOffset.bottomRight,
            child: Image.asset(
              'images/1.jpg',
              width: 120,
              height: 120,
            ),
          ),
        ],
      ),
    );
  }
}

樣式效果如下：