Flutter：Container（容器佈局）

Container佈局在Flutter裏大量使用，它是一個組合Widget，內部有繪製Widget、定位Widget和尺寸Widget。Container組件常用屬性如下圖：

下面是一個Container的示例：

• 在工程下新建一個images文件夾，並放入幾張圖片如下圖：
  
• 打開 pubspec.yaml 配置文件添加images配置如下圖：
  
• 接下來編寫Container代碼如下：

import 'package:flutter/material.dart';

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) {
    Widget container = Container(
      decoration: BoxDecoration(color: Colors.grey),
      child: Column(
        children: <Widget>[
          Expanded( // 防止內容溢出
            child: new Container(
              width: 150,
              height: 150,
              // 添加裝飾效果
              decoration: new BoxDecoration(
                  border: new Border.all(width: 10, color: Colors.blueGrey),
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8))),
              margin: const EdgeInsets.all(4.0),
              child: new Image.asset('images/1.jpg'),
            ),
          ),
          Expanded(
            child: new Container(
              width: 150,
              height: 150,
              decoration: new BoxDecoration(
                  border: new Border.all(width: 10, color: Colors.blueGrey),
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8))),
              margin: const EdgeInsets.all(4.0),
              child: new Image.asset(
                'images/2.jpg',
              ),
            ),
          ),
          Expanded(
            child: new Container(
              width: 150,
              height: 150,
              decoration: new BoxDecoration(
                  border: new Border.all(width: 10, color: Colors.blueGrey),
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8))),
              margin: const EdgeInsets.all(4.0),
              child: new Image.asset('images/3.jpg'),
            ),
          ),
          Expanded(
            child: new Container(
              width: 150,
              height: 150,
              decoration: new BoxDecoration(
                  border: new Border.all(width: 10, color: Colors.blueGrey),
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8))),
              margin: const EdgeInsets.all(4.0),
              child: new Image.asset('images/4.jpg'),
            ),
          )
        ],
      ),
    );

    return new Scaffold(
      appBar: AppBar(
        title: Text('Container'),
      ),
      body: container,
    );
  }
}

效果如下圖所示：