Container 容器组件

用于容纳单个子组件的容器组件。集成了若干个单子组件的功能，如内外边距、形变、装饰、约束等…

可用于显示一个指定宽高的区域

【width】 : 宽 【int】
【高】: 外边距 【int】
【color】: 子组件 【Color】

import 'package:flutter/material.dart';
class CustomContainer extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topLeft,
      width: 200,
      height: 200 * 0.618,
      color: Colors.red.withAlpha(88),
    );
  }
}

可以在区域中放入一个子组件

【padding】 : 内边距 【EdgeInsetsGeometry】
【margin】: 外边距 【EdgeInsetsGeometry】
【child】: 子组件 【Widget】

import 'package:flutter/material.dart';
class ContainerWithChild extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topLeft,
      padding: EdgeInsets.all(20),
      margin: EdgeInsets.all(10),
      width: 200,
      height: 200 * 0.618,
      color: Colors.grey.withAlpha(88),
      child: Icon(Icons.android),
    );
  }
}

可对子组件进行对齐定位

【alignment】 : 对齐定位 【AlignmentGeometry】

import 'package:flutter/material.dart';
class ContainerAlignment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.bottomRight,
      width: 200,
      height: 200 * 0.618,
      color: Colors.grey.withAlpha(88),
      child: Icon(
        Icons.android,
        color: Colors.green,
      ),
    );
  }
}

可对子组件进行装饰

【decoration】 : 装饰 【Decoration】
可装饰: 边线、圆弧、颜色、渐变色、阴影、图片等内容

import 'package:flutter/material.dart';
class ContainerDecoration extends StatelessWidget {

  static const rainbow = <int>[
    0xffff0000,
    0xffFF7F00,
    0xffFFFF00,
    0xff00FF00,
    0xff00FFFF,
    0xff0000FF,
    0xff8B00FF
  ];

  @override
  Widget build(BuildContext context) {
    var stops = [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0];
    return Container(//容器
      alignment: Alignment.center,
      width: 200,
      height: 200 * 0.618,
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(//添加渐变色
          gradient: LinearGradient(
              stops: stops,
              colors: rainbow.map((e) => Color(e)).toList()),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(50),
              bottomRight: Radius.circular(50)),
          boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(1, 1),
                blurRadius: 10,
                spreadRadius: 1),
          ]),
      child: Text(
        "Container",
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}

Container还具有变换性

【transform】 : 变换矩阵 【Matrix4】
基于Matrix4的矩阵变换，变换详情见线性代数

import 'package:flutter/material.dart';
class ContainerTransform extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //容器
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 150,
      height: 150 * 0.618,
      transform: Matrix4.skew(-pi / 10, 0),
      child: Text(
        "Container",
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}

Container的约束性

【constraints】 : 约束 【BoxConstraints】
会约束该区域的尺寸，不会小于指定的最小宽高，也不会大于指定的最大宽高。

import 'package:flutter/material.dart';
class ContainerConstraints extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //容器
      color: Colors.blue,
      width: 200,
      height: 200 * 0.618,
      constraints: BoxConstraints(
          minWidth: 100, maxWidth: 150,
          minHeight: 20, maxHeight: 100),
    );
  }
}