属性
属性 |
释义 |
alignment |
控制内部子元素显示位置 |
position |
控制内部子元素的显示位置 |
- 默认所有元素显示在左上角，和Android中的FrameLayout类似
eg:Stack使用：
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment(1, 0.3), // 设置坐标的形式，不设置该属性所有元素默认显示在左上角
// alignment : Alignment.center, // 使用属性的形式
children: <Widget>[
Container(
height: 400,
width: 400,
color: Colors.red,
),
Text(
"hah",
style: TextStyle(fontSize: 20, color: Colors.white),
),
Text(
"----------",
style: TextStyle(fontSize: 20, color: Colors.black),
),
],
);
}
}
eg：Align使用
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
height: 400,
width: 300,
color: Colors.black,
child: Stack(
// alignment: Alignment.center,
children: <Widget>[
Align(
alignment: Alignment(1,-0.2),
child: Icon(Icons.home,size: 40,color: Colors.white),
),
Align(
alignment: Alignment.center,
child: Icon(Icons.search,size: 30,color: Colors.white),
),
Align(
alignment: Alignment.bottomRight,
child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
)
],
),
),
);
}
}
eg：Positioned使用
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
height: 400,
width: 300,
color: Colors.black,
child: Stack(
// alignment: Alignment.center,
children: <Widget>[
Positioned(
left: 10, // 距左侧为10
top: 100, // 距上100
child: Icon(Icons.home,size: 40,color: Colors.white),
),
Positioned(
left: 10,
top: 10,
child: Icon(Icons.search,size: 30,color: Colors.white),
),
Positioned(
right: 10,
bottom: 10,
child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
)
],
),
),
);
}
}
