chapter_5.5.md

5.5 Container

We have used Containercomponents many times in the examples in the previous chapters . In this section, we will introduce Containercomponents in detail . ContainerIs a combination of class container itself does not correspond to specific RenderObject, it is DecoratedBox, ConstrainedBox、Transform, Padding, Alignand other combinations of components a multi-purpose container, so we simply by a Containermay be implemented simultaneously to be decorated, transformation, restriction scene components. Here is Containerthe definition:

Container({
 this.alignment,
 this.padding, //容器内补白，属于decoration的装饰范围
 Color color, // 背景色
 Decoration decoration, // 背景装饰
 Decoration foregroundDecoration, //前景装饰
 double width,//容器的宽度
 double height, //容器的高度
 BoxConstraints constraints, //容器大小的限制条件
 this.margin,//容器外补白，不属于decoration的装饰范围
 this.transform, //变换
 this.child,
})

ContainerMost of the properties have been introduced when introducing other containers, so I won’t repeat them, but there are two points that need to be explained:

• The size of the container can be specified by widthand heightattributes or by constraintsspecifying; if they exist at the same time, widthand heighttake precedence. In fact, the Container will generate one based on widthand .height``constraints
• colorAnd decorationare mutually exclusive, if they are set at the same time, an error will be reported! In fact, when specified color, Containerone is automatically created inside decoration.

Instance

We use Containerto achieve the card shown in Figure 5-16:

The implementation code is as follows:

Container(
 margin: EdgeInsets.only(top: 50.0, left: 120.0), //容器外填充
 constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小
 decoration: BoxDecoration(//背景装饰
     gradient: RadialGradient( //背景径向渐变
         colors: [Colors.red, Colors.orange],
         center: Alignment.topLeft,
         radius: .98
     ),
     boxShadow: [ //卡片阴影
       BoxShadow(
           color: Colors.black54,
           offset: Offset(2.0, 2.0),
           blurRadius: 4.0
       )
     ]
 ),
 transform: Matrix4.rotationZ(.2), //卡片倾斜变换
 alignment: Alignment.center, //卡片内文字居中
 child: Text( //卡片文字
   "5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
 ),
);

You can see the Containerfunctions of a variety of components. By looking at the Containersource code, we will easily find that it is a combination of the multiple components we introduced earlier. In Flutter, Containercomponents are also instances where composition takes precedence over inheritance.

Padding和Margin

Next, let's study the difference between Containercomponents marginand paddingattributes:

...
Container(
 margin: EdgeInsets.all(20.0), //容器外补白
 color: Colors.orange,
 child: Text("Hello world!"),
),
Container(
 padding: EdgeInsets.all(20.0), //容器内补白
 color: Colors.orange,
 child: Text("Hello world!"),
),
...

It can be found that the intuitive feeling is that marginthe white space is outside the container, while paddingthe white space is inside the container. Readers need to remember this difference. In fact, the Containerinner marginsum paddingis achieved through Paddingcomponents, the above sample code is actually equivalent to:

...
Padding(
 padding: EdgeInsets.all(20.0),
 child: DecoratedBox(
   decoration: BoxDecoration(color: Colors.orange),
   child: Text("Hello world!"),
 ),
),
DecoratedBox(
 decoration: BoxDecoration(color: Colors.orange),
 child: Padding(
   padding: const EdgeInsets.all(20.0),
   child: Text("Hello world!"),
 ),
),
...