【flutter】Container组件

Container是flutter中广泛使用的容器类组件，在以下场景会用到Container：

1. 设置宽高：flutter中大部分组件不能设置宽高，需要依赖容器。
2. 添加背景颜色
3. 添加背影图像
4. 添加内外边距：padding和margin
5. 添加边框
6. 设置圆角
7. 设置child对齐：居中、居左、居右、居上、居下或偏移
8. 设置变换：旋转或变形

因此，Container是一个非常基础的组件，同时也是用途广泛的组件，熟悉它非常有必要。

布局特点

一、Container在不设置宽高的情况下，它的size取决于

1. 如果设置了child，那么它会尽可能小，在没有设置constraints情况下，相当于child的大小。
2. 如果没有设置child，那么它会尽可能大，在没有设置constraints情况下，相当于parent的大小。

二、Container在设置了宽高的情况下，它在size取决于

1. 如果同时设置宽高与constraints，优先以设置的宽高为准，如果宽高不在constraints范围内会无效。
2. 如果设置了child，那么它会尽可能小，相当于constraints的最小值(不管child的大小)。
3. 如果没有设置child，那么它会尽可能大，相当于constraints的最大值。

constraints是一个约束大小的属性，相当于一个size范围，使Container不会小于最小size，不会超过最大size。

构造函数

Container(
	{Key key,
	AlignmentGeometry alignment,
	EdgeInsetsGeometry padding,
	Color color,
	Decoration decoration,
	Decoration foregroundDecoration,
	double width,
	double height,
	BoxConstraints constraints,
	EdgeInsetsGeometry margin,
	Matrix4 transform,
	Widget child}
)

属性

• alignment：child对齐的属性，可以设置居中、居左、居右、居上、居下等等。
  alignment已经在我的另外一篇文章中详细说明：Flutter Stack组件
• padding：内边距。width和height包含padding值。
• color：背景颜色。
• decoration：设置装饰，比如边框、圆角、背景图片等。不能给Container同时设置decoration和color属性，如果要同时设置，给decoration设置color就可以。
• foregroundDecoration，设置前景装饰。
• width：宽度。
• height：高度。
• constraints：大小范围约束，constraints有四个属性：minWidth、minHeight、maxWidth、maxHeight。
• margin: 外边距。
• transform：变换效果，比如翻转、旋转、变形等。
• child：子组件，可以不设置。

Container的属性空间关系：

示例一：约束、对齐与变换。

Container(
  constraints: BoxConstraints.expand(
    height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.blue[600],
  alignment: Alignment.center,
  child: Text('Hello World',
    style: Theme.of(context)
        .textTheme
        .display1
        .copyWith(color: Colors.white)),
  transform: Matrix4.rotationZ(0.1),
)

运行效果：

示例二：给Container添加背景图片

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: new Container(
          constraints: new BoxConstraints.expand(width: 300,height: 300),
          decoration: new BoxDecoration(
            border: new Border.all(width: 2.0, color: Colors.red),
            color: Colors.grey,
            borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
            image: new DecorationImage(
              image: new AssetImage('graphyics/face.jpg'),
            ),
          ),
          padding: const EdgeInsets.all(8.0),
          alignment: Alignment.center,
          child: new Text('Hello Container',style: TextStyle(color: Colors.red),),
        ))));

运行效果：

示例三：不设置宽高和约束，有child，size会尽可能小

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: Container(
            child: Text("Hello,Container",
                style: TextStyle(fontSize: 20, color: Colors.white)),
            color: Colors.red))));

运行效果：

示例四：不设置宽高和约束，没有child，size会尽可能大

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: Container(
            color: Colors.green))));

运行效果：

示例五：宽高不在约束范围内会无效。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: Container(
            constraints: BoxConstraints(
                minWidth: 200, minHeight: 200, maxWidth: 400, maxHeight: 400),
            width: 20,
            height: 20,
            child: Text("Hello,Container",
                style: TextStyle(fontSize: 20, color: Colors.white)),
            color: Colors.green))));

运行效果(绝色区域宽高是200)：

示例六：没有设置宽高但是设置了child，会尽可能小，不会小于child的size。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: Container(
            constraints: BoxConstraints(
                minWidth: 20, minHeight: 20, maxWidth: 400, maxHeight: 400),
            child: Text("Hello,Container",
                style: TextStyle(fontSize: 20, color: Colors.white)),
            color: Colors.green))));

示例七：设置了child和宽高会尽可能小，小到设置的有效值(minWidth或width)

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: Container(
            constraints: BoxConstraints(
                minWidth: 10, minHeight: 10, maxWidth: 400, maxHeight: 400),
            width: 50,
            height: 50,
            child: Text("Hello,Container",
                style: TextStyle(fontSize: 20, color: Colors.white)),
            color: Colors.green))));