1.Row
行：在水平方向显示子控件，但是不能滚动。
（注意：行的子控件一般包裹在 Expanded或Flexible小部件中，不然，行溢出时，在行末尾有黄黑色警告条纹。如下图）
包含在Expanded中
行溢出时
关于Row的构造器：
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
}) : super(
children: children,
key: key,
direction: Axis.horizontal,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);
}
| 参数名 | 参数解释 |
|---|---|
| MainAxisAlignment | 主轴方向的对齐方式（对于Row来说，主轴是横轴） |
| MainAxisSize | 在主轴方向占有空间的值 |
| crossAxisAlignment | 在交叉轴的对齐方式 |
| TextDirection | 绘制方向，从左向右还是从右向左 |
| VerticalDirection | children绘制顺序，从上向下，或者从下向上 |
| TextBaseline | 基线，根据那个基线对齐 |
| children | 添加的子控件 |
2.Column:
构造器：
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
}) : super(
children: children,
key: key,
direction: Axis.vertical,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
);
}
和行的参数一样，只不过主轴的对齐方式参考不一样，对于Row主轴为横轴，而Column为纵轴。
3.Stack
取代线性布局，Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位布局模型设计的。
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
}) : super(key: key, children: children);
alignment：对齐方式，默认是左上角。
4.Container
容器组件，可以设置边距，填充，大小等限制。
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)".'
),
decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),
constraints =
(width != null || height != null)
? constraints?.tighten(width: width, height: height)
?? BoxConstraints.tightFor(width: width, height: height)
: constraints,
super(key: key);
| 参数 | 参数解释 |
|---|---|
| alignment | 对齐方式 |
| padding | 内边距值 |
| color | 填充颜色 |
| decoration | 设置边框、背景色、背景图片、圆角等属性 |
| foregroundDecoration | 前景装饰 |
| width | 容器宽 |
| height | 容器高 |
| constraints | 对容器进行装饰 |
| margin | 容器外边距 |
| transform | 矩阵变换 |
| child | 子控件 |
class TestContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
padding: EdgeInsets.all(30),
// color: Colors.green,
alignment: Alignment(0.1, 0.0),
width: 250,
height: 500,
margin: EdgeInsets.all(20),
transform: Matrix4.rotationZ(-0.1),
constraints: BoxConstraints.expand(height: 250.0, width: 500.0),
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'http://file06.16sucai.com/2016/0829/37c41d6c1e7af2ece2b3936c0aab86da.jpg'),
)
),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10)
),
child: Text(
"hello world",
style: TextStyle(
fontSize: 50
),
),
);
}
}
运行结果如下：
在这里插入图片描述
