Flutter初学之路<3>—`Container`

Flutter 所有元素都是由组件组成，因此其核心理念是一切皆为组件。

Container （容器组件）一个简便的组件，其结合了常见的绘制、定位和调整尺寸的组件。这一点我们可以通过其构造函数看出。

Container({
    Key key,    //Container唯一标识符，用于查找更新
    AlignmentGeometry  alignment,  //控制child对齐方式
    EdgeInsetsGeometry padding,    //内部空白区域
    Color color,    //背景色
    Decoration decoration,    //绘制child后面的装饰，若设置该属性，则不能设置color属性
    Decoration foregroundDecoration,  //绘制child前面的装饰
    double width,  //Container宽度
    double  height,  //Container高度
    BoxConstraints constraints,  //添加到child上的额外约束条件
    EdgeInsetsGeometry  margin,  //外部空白区域
    Matrix4  transform,  //变换矩阵
    Widget child  //内容组件
})

示例：

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: Scaffold(
        body: Center(
          child: Container(
            alignment: Alignment.center,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(10.0),
            //color: Colors.teal.shade700,
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage("https://cdn.jsdelivr.net/gh/flutterchina/website@1.0/images/flutter-mark-square-100.png")
              )
            ),
            foregroundDecoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage("https://cdn.jsdelivr.net/gh/flutterchina/website@1.0/images/flutter-mark-square-100.png"),
                  centerSlice: Rect.fromLTRB(270.0, 280.0, 1360.0, 730.0)
              )
            ),
            width: 148.0,
            height: 148.0,
            constraints: BoxConstraints.expand(
              height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0
            ),
            transform: Matrix4.rotationZ(0.1),
            child: Text(
                "Hello Container!",
                style: Theme.of(context).textTheme.display1.copyWith(
                  color: Colors.red
                ),
            ),
          ),
        ),
      ),
    );
  }
}

1. 组成

Container 由child组件内容、对齐方式、背景颜色或者绘制后的装饰、绘制前的装饰，宽度，高度，变换矩阵，外空白，内空白，以及额外的约束条件组成。
Container首先进行变换矩阵绘制，接着绘制背景色或绘制后的装饰，然后绘制child组件，最后才绘制前的装饰。
Container 如果没有包含宽、高及约束条件，且没有子组件则会自适应屏幕大小，否则会根据子组件来调节自身尺寸或者按照构造器传的参数来调节。

2. 布局

Container会根据对齐方式、自适应子组件、构造器传入的宽、高以及约束条件、自适应父组件的顺序来布局。

3.注意事项

由于Container中Color是按照decoration来绘制的，所有color和decoration只能存在一个，否则会报错。