一.复习上一节
1.Padding组件
Padding( padding: xx child :xx )2.Row组件横向排列
Row( child : child[xx,xx ] )3.Column组件竖向排列
Column( child : child[xx,xx ] )4.Expanded组件可设置权重
Expaned( flex:xx, child :xx )
二.Flutter Stack组件
- Stack
Stack 表示堆得意思，我们可以用Stack或Stack结合Align或者Stack结合Positioned来实现页面的定位布局
- 常用属性
alignment :配置所有子元素的显示位置
children :子组件
- Stack类似于Android中的相对布局
class MyBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: Stack(
alignment: Alignment(1,-1),
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.pink,
),
Text("我")
],
),
);
}
}
- 注意
- 代码中Text组件是叠在Container组件上的
- alignment:是对Stack组件内所有组件位置调整
- alignment:可以Alignment.center 也可以写坐标Alignment(1,-1) 。(-1,-1)右上角 ，(1,1)右下角 纵坐标是反过来的
- Stack组件中的alignment属性是不能对单独子view做调整的
三.Flutter Stack +Allign 控制子元素
Stack组件中结合Align组件可以控制每个子元素的显示位置
常用属性
alignment :配置所有子元素的显示位置
children :子组件
class MyBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
width: 100,
height: 100,
color: Colors.pink,
alignment: Alignment.center,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Text("左上"),
),
Align(
alignment: Alignment.bottomRight,
child: Text("右下"),
),
Align(
alignment: Alignment.bottomLeft,
child: Text("左下"),
),
Align(
alignment: Alignment.topRight,
child: Text("右上"),
)
],
),
);
}
}
- 注意
- Align可以控制组件在父组件中的位置。
- 一般Container+Stack+Align 是结合使用。
- Align中alignment 可以Alignment.topLeft 也可以使用坐标Alignment(0,0)。
-
效果图
image.png
四.Flutter Stack +Positioned 控制子元素
Stack组件结合Positioned组件也可以控制每个子元素的显示位置，用法和Align一样
常用属性
- top:子元素距离顶部的距离
- bottom:子元素距离底部的距离
- left:子元素距离左侧的距离
- right:子元素距离右侧的距离
class MyBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
width: 100,
height: 100,
color: Colors.pink,
alignment: Alignment.center,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
left: 0,
top: 0,
child: Text("左上"),
),
Positioned(
bottom: 0,
right: 0,
child: Text("右下"),
),
Positioned(
bottom: 0,
left: 0,
child: Text("左下"),
),
Positioned(
right: 0,
top: 0,
child: Text("右上"),
)
],
),
);
}
}
- 注意
Positioned 一般结合两个属性方位来控制位置
五.总结
- Stack组件中的alignment属性是不能对单独子view做调整的
- 结合Stack+Align 组件控制子view的位置。
- 结合Stack+Positioned 组件控制子view的位置。
