Container
简介
官方给出的简介,是一个结合了绘制(painting)、定位(positioning)以及尺寸(sizing)widget的widget。
布局特点
- 如果没有子节点、没有设置width、height以及constraints,并且父节点没有设置unbounded的限制,Container会将自身调整到足够小。
- 如果没有子节点、对齐方式(alignment),但是提供了width、height或者constraints,那么Container会根据自身以及父节点的限制,将自身调节到足够小。
- 如果没有子节点、width、height、constraints以及alignment,但是父节点提供了bounded限制,那么Container会按照父节点的限制,将自身调整到足够大。
- 如果有alignment,父节点提供了unbounded限制,那么Container将会调节自身尺寸来包住child;
- 如果有alignment,并且父节点提供了bounded限制,那么Container会将自身调整的足够大(在父节点的范围内),然后将child根据alignment调整位置;
- 含有child,但是没有width、height、constraints以及alignment,Container会将父节点的constraints传递给child,并且根据child调整自身。
使用场景
Container是一个相对功能比较多的Widget,用它来做一些复杂的布局,例如
- 需要设置间隔,使用margin padding . 如果只需要padding,也可以直接用Padding.
- 需要对齐 使用alignment
- 需要设置背景色或者背景图片的时候 使用color
- 需要边框,圆角,阴影 使用deoration
注意:deoration和 color: 背景颜色不能共存,二者同时只能有一个
构造方法
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,
})
简单的例子
效果
先来看看效果
这个Demo涵盖了Container的基本用法.
- 宽度和高度
- margin和padding
- 对齐的方式
- 背景
- 边框
- 阴影
实现
Widget _buildContainerText() {
return Container(
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.all(20.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
color: Colors.blueAccent,
boxShadow: [
BoxShadow(
offset: Offset(0.0, 5.0),
color: Colors.blueAccent,
blurRadius: 10.0,
spreadRadius: -5.0,
),
]),
child: Text("我是示例代码", style: TextStyle(color: Colors.white)),
);
}
参考
https://juejin.im/post/5b13c3e1f265da6e3d666d80