Article Directory
Widget layout list
This category
widget
includesContainer、Padding 、 Center 、Align、Margin
Container
Container
It is a combination of drawpainting
( ), positioning (positioning
) and sizesizing
( )widget
awidget
.
Reference: Flutter layout (a) - Container Detailed
Container({
Key key,
this.alignment,// 控制child的对齐方式
this.padding,//decoration内部的空白区域
Color color,//用来设置container背景色.和 foregroundDecoration 有冲突
Decoration decoration,//绘制在child后面的装饰,可以设置边框、背景色、背景图片、圆角等属性
this.foregroundDecoration,//绘制在 child 前面的装饰
double width,//宽度
double height,// 高度
BoxConstraints constraints,//添加到child上额外的约束条件
this.margin,//围绕在decoration和child之外的空白区域,不属于内容区域
this.transform,//设置container的变换矩阵
this.child,//container中的内容widget
})
Look at an example: Example Source Flutter layout (a) - Container Detailed
Container(
constraints: new BoxConstraints.expand(// child 的 约束条件,改变参数后没看出效果,目前先跳过
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
decoration: new BoxDecoration(
border: new Border.all(width: 2.0, color: Colors.red),// 红色边框2像素
color: Colors.grey,// BoxDecoration背景色为灰色
borderRadius: new BorderRadius.all(new Radius.circular(20.0)),// 边框圆角
image: new DecorationImage(
image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),//将普通的图片设置成类似于安卓中的.9图,用于图片拉伸
),
),
padding: const EdgeInsets.all(8.0),// 上下左右内边距为 8
alignment: Alignment.center,// 内容居中显示
child: new Text('Hello World',
style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
transform: new Matrix4.rotationZ(0.3),// 延Z轴倾斜 13.5 度
);
Padding
Reference: Flutter layout (two) - Padding, Align, Center Detailed
To
widget
setpadding
property
Field properties:
const Padding({
Key key,
@required this.padding,// 内边距
Widget child,// 内容布局
})
example:
new Padding(
padding: new EdgeInsets.all(40.0),
child: const Card(child: const Text('Hello World!')),
)
Align
Set
child
alignment, such as centering, Left Right and so on.
Fields meaning:
const Align({
Key key,
this.alignment = Alignment.center,//对齐方式,默认居中对齐
this.widthFactor,// 宽度因子,如果设置的话,Align的宽度就是child的宽度乘以这个值,不能为负数。
this.heightFactor,// 高度因子,如果设置的话,Align的高度就是child的高度乘以这个值,不能为负数。
Widget child,
})
alignment
Alignment, Alignment
provided the following ones:
Example:
Align(
alignment: Alignment.center,
widthFactor: 20.0,
heightFactor: 10.0,
child: new Text("Align"),
)
Center
Center
Inherited fromAlign
Center
Which is Align widget
set alignment: Alignment.center
after the controls
Example:
Column (
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Text("Align"),
),
Center(
child: Text("Center"),
)
],
)
End ~