在Flutter中,Container(“容器”)是用于包含子窗口小部件的框。同时可以通过填充,边距,对齐方式等属性来设置其样式。Container突出显示内容或将该内容与其他内容分开。
Container构造器 -
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,
Clip clipBehavior: Clip.none}
)
创建容器时涉及很多参数,例如宽度,高度,子代,对齐方式等。此外,它受父窗口小部件约束的影响,因此布局行为相对复杂。下面来看一下在情况下的不同示例:
情况-1
Center (
child: Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(10, 5, 50, 5),
width: 200,
height: 200
)
)
显示效果如下:
情况-2
如果未指定子级,宽度,高度和约束参数(或为null
),并且父级窗口小部件未绑定,则Container
将尝试确定其大小尽可能小。
下面来看一个示例:未指定具有:width
,height
,child
和constraints
参数的Container
,并且它是Row
的子类,它将尝试确定其水平尺寸尽可能小。
注意:“Row”是一个垂直限制的小部件,但水平方向是无限制的。
Row (
children: [
Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
)
]
)
显示效果如下:
情况-3
如果未指定child
, width
, height
和 constraints
参数(或为null
),并且父级窗口小部件是有界的,则Container
将尝试将其大小设置为尽可能大。
示例:未指定带有child
, width
, height
和 constraints
参数的Container
,并且它是Center
的子项,那么Container
的大小将尽可能大。
Center (
child: Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
margin: EdgeInsets.fromLTRB(30, 55, 50, 70)
)
)
显示效果如下:
情况-4
如果指定了child
,但未指定width
, height
,constraints
和alignment
参数,则Container
将尽可能小,并符合父窗口小部件的约束。
例如:
Center (
child: Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
child: ElevatedButton (
child: Text("Button"),
onPressed: () {},
)
)
)
显示效果如下:
示例代码:
ConstrainedBox (
constraints: BoxConstraints (
maxWidth: 300,
maxHeight: 200
),
child: Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
child: ElevatedButton (
child: Text("Button"),
onPressed: () {},
)
)
)
效果如下:
2. alignment
alignment
属性用于对齐子级在Container
中的位置。
AlignmentGeometry alignment
如果Container指定child
,但未指定width
, height
,constraints
和alignment
方式,则会将其尺寸设置得尽可能小。但是,如果Container指定子项和路线,但未指定width
, height
,constraints
和alignment
,则它将确定其大小尽可能大。
Container (
alignment: Alignment.bottomRight,
color: Colors.greenAccent[100],
padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
child: ElevatedButton (
child: Text("Button"),
onPressed: () {},
)
)
运行结果如下:
3. padding
padding
属性用于在Container中创建一个空白空间并包围子级(如果有)。
EdgeInsetsGeometry padding
4. color
color
属性用于设置容器和子级后面的背景色。
Color color
5. decoration
decoration
属性用于在“容器”背景之上和子项后面绘制一些东西。如果要在容器的背景上(以及在子对象的后面)绘制颜色,则最好使用color
属性。
Decoration decoration
示例:
Container (
alignment: Alignment.center,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: const DecorationImage(
image: NetworkImage('https://s3.o7planning.com/images/tom-and-jerry.png'),
fit: BoxFit.cover,
),
border: Border.all( color: Colors.black, width: 8),
borderRadius: BorderRadius.circular(12),
),
margin: EdgeInsets.all(30),
child: ElevatedButton(
child: Text("I am a Long Button"),
onPressed: () {}
)
)
结果如下:
6. foregroundDecoration
foregroundDecoration
属性用于在 Container 的背景上和子元素的前面绘制一些东西。它可以遮盖并隐藏子元素,但是仍然可以与子元素交互互动。
Decoration foregroundDecoration
示例:
Container (
alignment: Alignment.center,
foregroundDecoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage('https://s3.o7planning.com/images/smile-64.png'),
fit: BoxFit.none,
),
border: Border.all( color: Colors.black, width: 8),
borderRadius: BorderRadius.circular(12),
),
margin: EdgeInsets.all(30),
child: ElevatedButton(
child: Text("I am a Long Button"),
onPressed: () {}
)
)
运行效果:
7. width
double width
8. height
double height
9. constraints
constraints
属性用于向容器添加额外的约束。
BoxConstraints constraints
示例:
Container (
color: Colors.greenAccent[100],
padding: EdgeInsets.all(30),
width: 200,
height: 200,
constraints: BoxConstraints(
maxHeight: 80
),
child:ElevatedButton(
child: Text("Button"),
onPressed: (){},
)
)
运行效果如下: