Flutter之Container详解

1 基本内容
1.1 继续关系
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container
注：所有控件都是Widget的子类！

1.2 介绍
一个便利的控件，结合了常见的绘画，定位和大小调整。

1.3 行为
由于Container结合了许多其他Widget，每个Widget都有自己的布局行为，因此Container的布局行为有点复杂。

依次是：

1.采用alignment

2.以child调整自身大小

3. 采用了width，height和constraints

4.扩大以适应父Widget

5.要尽可能小

具体情况来说：

1· 如果Container没有子Widget，没有height，没有width，没有constraints，并且父窗口提供无限制约束，则Container尝试尽可能小。

2· 如果Container没有子Widget，没有alignment，而是一个height，width或 constraints提供，Container试图给出这些限制和父Widget的约束相结合，以尽可能小。

3· 如果Container没有子Widget，没有height，没有width，没有constraints，没有alignment，但是父窗口提供了有界约束，那么Container会扩展以适应父窗口提供 的约束。

4· 如果Container具有alignment，并且父窗口提供无限制约束，则constraints会尝试围绕子Widget的alignment自身大小。

5· 如果Container具有alignment，并且父窗口提供有界约束，则constraints会尝试展开以适合父窗口，然后根据alignment将子项置于其自身内。

6· Container具有子Widget，但没有height，没有width，没有constraints，没有alignment，将父级constraints传递给子级，自身调整大小。

2 构造方法讲解
Container({
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
}) : assert(margin == null || margin.isNonNegative),
assert(padding == null || padding.isNonNegative),
assert(decoration == null || decoration.debugAssertIsValid()),
assert(constraints == null || constraints.debugAssertIsValid()),
assert(color == null || decoration == null,
'Cannot provide both a color and a decoration\n'
'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'
)
各参数详解

2.1 Key key：
您可以使用key来控制框架将在widget重建时与哪些其他widget匹配。默认情况下，框架根据它们的runtimeType和它们的显示顺序来匹配。 使用key时，框架要求两个widget具有相同的key和runtimeType。

Key在构建相同类型widget的多个实例时很有用。例如，List构建足够的ListItem实例以填充其可见区域：

如果没有key，当前构建中的第一个条目将始终与前一个构建中的第一个条目同步，即使在语义上，列表中的第一个条目如果滚动出屏幕，那么它将不会再在窗口中可见。

通过给列表中的每个条目分配为“语义” key，无限列表可以更高效，因为框架将同步条目与匹配的语义key并因此具有相似（或相同）的可视外观。 此外，语义上同步条目意味着在有状态子widget中，保留的状态将附加到相同的语义条目上，而不是附加到相同数字位置上的条目。

2.2 AlignmentGeometry alignment:
如果父Widget尺寸大于child Widget尺寸，这个属性设置会起作用，有很多种对齐方式。

AlignmentGeometry 是个抽象类

Alignment与AlignmentDirectional一样的，只是命名不一样，如Alignment中的topLeft跟AlignmentDirectional中的topStart一致。

Alignment主要以下对齐方式：

/// The top left corner.
  static const Alignment topLeft = Alignment(-1.0, -1.0);

/// The center point along the top edge.
  static const Alignment topCenter = Alignment(0.0, -1.0);

/// The top right corner.
  static const Alignment topRight = Alignment(1.0, -1.0);

/// The center point along the left edge.
  static const Alignment centerLeft = Alignment(-1.0, 0.0);

/// The center point, both horizontally and vertically.
  static const Alignment center = Alignment(0.0, 0.0);

/// The center point along the right edge.
  static const Alignment centerRight = Alignment(1.0, 0.0);

/// The bottom left corner.
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);

/// The center point along the bottom edge.
  static const Alignment bottomCenter = Alignment(0.0, 1.0);
明显看出构造方法中的二个参数范围在[-1.0，1.0] 表示从顶部到底部或者从左到右

比如，想让child在居中Alignment(0.0, 0.0)

FractionalOffset继承Alignment

FractionalOffset构造方法可以看出，方法中的二个参数范围在[0.0，1.0]表示从顶部到底部或者从左到右

const FractionalOffset(double dx, double dy)
: assert(dx != null),
assert(dy != null),
super(dx * 2.0 - 1.0, dy * 2.0 - 1.0);
2.3 EdgeInsetsGeometry padding:
内边距：本Widget边框和内容区之间距离。

EdgeInsetsGeometry 是个抽象类：

同理：EdgeInsetsDirectional与EdgeInsets功能一致！

EdgeInsets比EdgeInsetsDirectional多了一个方法：

const EdgeInsets.all(double value)

: left = value, top = value, right = value, bottom = value;

他们的常用方法

const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);

const EdgeInsetsDirectional.fromSTEB(this.start, this.top, this.end, this.bottom);

注意的是，四个参数都不能有负数

因为：限定了 assert(padding == null || padding.isNonNegative)

2.4 Color color:
Container背景色

一般通过 const Color(int value) : value = value & 0xFFFFFFFF; 创建对象，也可以使用Colors类中的静态成员，从value & 0xFFFFFFFF可看出，默认值会不透明的。

注意：

用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。

container背景色和decoration不能同时设置，

因为：Container构造方法限定了assert(color == null || decoration == null,

'Cannot provide both a color and a decoration\n'

'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'

)

2.5 Decoration decoration：
绘制背景图案。

将在下一篇文章中详细讲解Decoration （边框、圆角、阴影、形状、渐变、背景图像）

注意：

container背景色和decoration不能同时设置

2.6 Decoration  foregroundDecoration：
decoration是背景，foregroundDecoration是前景。设置了foregroundDecoration可能会遮盖child内容，一般半透明遮盖（蒙层）效果使用！

将在下一篇文章中详细讲解Decoration （边框、圆角、阴影、形状、渐变、背景图像等等）

2.7 width、height
width：container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。

height：container的高度，设置为double.infinity可以强制在高度上撑满。

2.8 BoxConstraints constraints:
添加到child上额外的约束条件。

const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity,
this.minHeight = 0.0,
this.maxHeight = double.infinity
});
明显是来设置child的宽高范围值。还有很多静态方法，不一一列出，看源码即可！

注意：

0.0表示最小，double.infinity为无限大

2.9 EdgeInsetsGeometry margin:
外边距：本Widget与父边框的距离。

值与padding一致。

2.10 Matrix4 transform：
4D Matrix（矩阵）后面文章会详解

3.0 Widget child:
控件内容widget。

3 效果及示例

代码：

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: 'My app', // used by the OS task switcher
home: new MyStartUI(),
));
}

class MyStartUI extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
constraints: new BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
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 NetworkImage('https://avatar.csdn.net/8/9/A/3_chenlove1.jpg'),
centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
),
),
padding: const EdgeInsets.all(5.0),
margin: const EdgeInsets.all(10.0),
alignment: Alignment.center,
child: new Text('Ying You Learning',
style: Theme.of(context).textTheme.display1.copyWith(color: Colors.red)),
transform: new Matrix4.rotationZ(0.0),
);
}

原文：https://blog.csdn.net/chenlove1/article/details/83032767