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,
);
}
| 參數(shù)名 | 參數(shù)解釋 |
|---|---|
| MainAxisAlignment | 主軸方向的對齊方式（對于Row來說，主軸是橫軸） |
| MainAxisSize | 在主軸方向占有空間的值 |
| crossAxisAlignment | 在交叉軸的對齊方式 |
| TextDirection | 繪制方向迅细，從左向右還是從右向左 |
| VerticalDirection | children繪制順序巫橄，從上向下，或者從下向上 |
| TextBaseline | 基線茵典，根據(jù)那個基線對齊 |
| 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,
);
}
和行的參數(shù)一樣湘换，只不過主軸的對齊方式參考不一樣，對于Row主軸為橫軸统阿，而Column為縱軸彩倚。
3.Stack
取代線性布局，Stack允許子 widget 堆疊， 你可以使用 Positioned 來定位他們相對于Stack的上下左右四條邊的位置。Stacks是基于Web開發(fā)中的絕度定位布局模型設計的贮尉。
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);
| 參數(shù) | 參數(shù)解釋 |
|---|---|
| alignment | 對齊方式 |
| padding | 內(nèi)邊距值 |
| 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
),
),
);
}
}
運行結果如下：
在這里插入圖片描述
