Stack表示堆的意思,我们可以使用Stack或者结合Align或Positond实现定位布局
Stack常用属性:
属性 | 说明 |
alignment |
配置所有子元素的显示位置 |
children |
子元素 |
结合Positioned组件来控制每个子元素的显示位置
属性 | 说明 |
top | 子元素距离顶部的距离 |
bottom | 子元素距离底部的距离 |
left | 子元素距离左侧的距离 |
right | 子元素距离右侧的距离 |
child | 子组件 |
结合Align组件来控制每个子元素的显示位置
属性 | 说明 |
alignment | 配置子元素显示的位置 |
child | 子组件 |
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Stack"),),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 600,
color: Colors.lightBlue,
child: Stack(
children: <Widget>[
Positioned(
child: Icon(Icons.mail,color: Colors.yellow,size: 100,),
left: 10,
),
Positioned(
child: Text("Email",),
left: 42,
top: 60,
),
Align(
alignment: Alignment.topCenter,
child: Icon(Icons.camera_alt,color: Colors.green,size: 100,),
),
Positioned(
child: Icon(Icons.phone,color: Colors.white,size: 100,),
right: 10,
),
],
),
),
);
}
}