层叠布局和 Web 中的absolute绝对定位、Android 中的 Frame 布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置。层叠布局允许子组件按照代码中声明的顺序堆叠起来。Flutter中使用 Stack
和 Positioned
这两个组件来配合实现绝对定位。Stack
允许子组件堆叠,而 Positioned
用于根据 Stack
的四个角来确定子组件的位置。
Stack
- alignment 没有定位或部分定位的子组件的对齐方式
- textDirection 确定alignment对齐的参考系
- children 子组件列表
- fit 确定没有定位的子组件如何去适应Stack的大小。StackFit.loose表示使用子组件的大小,StackFit.expand表示扩伸到Stack的大小。
- clipBehavior 对超出Stack显示空间的部分如何剪裁
- hashCode
- key
- runtimeType
Positioned
- child 定位元素
- width 宽
- height 高
- left 距离左边偏移
- right 距离右边边偏移
- top 距离顶部偏移
- bottom 距离底部偏移
- debugTypicalAncestorWidgetClass
- hashCode
- key
- runtimeType
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Container 容器'),
),
body: Stack(
alignment: Alignment.centerRight,
fit: StackFit.loose,
clipBehavior: Clip.hardEdge,
children: const <Widget>[
FlutterLogo(size: 200,),
FlutterLogo(size: 60, style: FlutterLogoStyle.stacked),
Positioned(
width: 100,
height: 100,
top: 0,
left: 0,
child: Text("定位元素"),
)
],
)
)
);
}
}
实现效果: