Flutter之Container详解

时间:2023-03-08 15:58:37

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.****.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.****.net/chenlove1/article/details/83032767