【Flutter】页面布局：层叠布局（Stack、Positioned）
在 Flutter 中，布局系统提供了多种方式来管理 UI 元素的排列方式。其中，Stack 和 Positioned 是非常重要的布局组件，允许开发者将子组件按层叠方式（即堆叠）布局，使得组件可以相互重叠。通过使用 Stack 和 Positioned，可以轻松实现复杂的界面效果，如悬浮按钮、页面上的层次关系、背景覆盖等。
本教程将详细介绍 Stack 和 Positioned 的工作原理、常见使用场景，并通过实例展示如何在 Flutter 中实现灵活的层叠布局。
什么是层叠布局？
Stack 是 Flutter 中的一个布局组件，允许多个子组件按照堆叠顺序展示，也就是说，后添加的子组件会覆盖前面的子组件。与其他布局不同，Stack 不会自动调整子组件的位置，而是将子组件彼此叠加放置。
Positioned 是 Stack 的子组件之一，用来精确控制子组件在 Stack 中的位置。通过 Positioned，可以指定子组件相对于 Stack 边缘的位置，如 top、bottom、left 和 right 等。
Stack 的基本使用
Stack 的核心理念是：它允许多个子组件按照 z 轴（深度）的顺序堆叠在一起。子组件按照声明顺序叠放，越后声明的组件位于上方。
基本示例
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Stack 示例')),
body: Stack(
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.red,
),
Container(
width: 200,
height: 200,
color: Colors.green,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
),
),
);
}
}
在这个示例中，我们使用了 Stack 来创建三个不同大小的彩色方块。由于 Stack 的布局特性，后添加的组件会覆盖前面的组件，因此最终效果是蓝色方块叠加在绿色方块上，而绿色方块又叠加在红色方块上。
Stack 的核心属性
alignment
alignment 属性用于控制子组件在 Stack 中的对齐方式。Stack 默认情况下将子组件放置在左上角，但可以通过 alignment 属性来改变这一行为。
常见的 alignment 值：
Alignment.topLeft: 左上角对齐（默认）。Alignment.topRight: 右上角对齐。Alignment.center: 居中对齐。Alignment.bottomRight: 右下角对齐。
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.red,
),
Container(
width: 200,
height: 200,
color: Colors.green,
),
],
)
在上面的代码中，两个方块将会在 Stack 中居中对齐，而不是默认的左上角对齐。
fit
fit 属性决定 Stack 的大小是否跟随子组件的尺寸变化，常见的值包括：
StackFit.loose: 子组件可以按原有大小展示，不强制调整。StackFit.expand: 子组件强制占满整个Stack。StackFit.passthrough: 子组件尺寸自适应。
Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
color: Colors.red,
),
Container(
width: 200,
height: 200,
color: Colors.green,
),
],
)
在这个例子中，红色的 Container 将会占据整个 Stack 的空间，而绿色的 Container 将按照其自身大小展示。
overflow
overflow 属性用于控制当子组件超出 Stack 边界时的显示行为：
Overflow.visible: 超出部分仍会显示（默认）。Overflow.clip: 超出部分会被剪裁，无法显示。
Positioned 的使用
Positioned 是 Stack 的子组件之一，专门用于在 Stack 中精确控制子组件的位置。通过 Positioned，我们可以定义子组件距离 Stack 边缘的距离。
Positioned 的常见属性：
top: 距离Stack顶部的距离。bottom: 距离Stack底部的距离。left: 距离Stack左侧的距离。right: 距离Stack右侧的距离。width: 子组件的宽度。height: 子组件的高度。
示例：使用 Positioned 布局子组件
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Positioned 示例')),
body: Stack(
children: <Widget>[
Positioned(
top: 50,
left: 50,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
Positioned(
bottom: 50,
right: 50,
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
),
],
),
),
);
}
}
在这个示例中，两个方块分别被放置在距离 Stack 顶部和左侧 50 像素的位置，以及距离底部和右侧 50 像素的位置。Positioned 提供了强大的精确定位功能，允许我们在 Stack 中任意定位子组件。
Stack 与 Positioned 的复杂布局实例
通过结合 Stack 和 Positioned，我们可以实现一些复杂的 UI 布局效果，比如构建具有背景图片的页面，或者在固定位置上放置悬浮按钮。
示例：实现一个悬浮按钮布局
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('悬浮按钮示例')),
body: Stack(
children: <Widget>[
// 背景图片
Positioned.fill(
child: Image.network(
'https://flutter.dev/assets/homepage/carousel/slide_1-layer_0-2e0e50a9a7329c64b19faacc7b00d7e6.png',
fit: BoxFit.cover,
),
),
// 中心文本
Center(
child: Text(
'Hello Flutter!',
style: TextStyle(
fontSize: 36,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
// 右下角悬浮按钮
Positioned(
bottom: 30,
right: 30,
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
),
],
),
),
);
}
}
这个例子展示了如何使用 Stack 和 Positioned 来创建一个具有背景图片、中心文本以及悬浮按钮的页面布局。通过 Positioned.fill，我们让背景图片占据整个 Stack，同时使用 Center 来将文本居中显示，最后在页面的右下角放置一个悬浮按钮。
Stack 与 Positioned 的高级用法
除了基础用法，Stack 和 Positioned 还可以与 AnimatedPositioned 等动画组件结合使用，创建动态的布局效果。
示例：使用 AnimatedPositioned 实现动画效果
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _isMoved = false;
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('AnimatedPositioned 示例')),
body: Stack(
children: <Widget>[
AnimatedPositioned(
duration: Duration(seconds: 2),
left: _isMoved ? 200 : 50,
top: _isMoved ? 200 : 50,
child: GestureDetector(
onTap: () {
setState(() {
_isMoved = !_isMoved;
});
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
),
),
],
),
),
);
}
}
这个示例通过 AnimatedPositioned 实现了点击蓝色方块后，它会平滑移动到另一个位置的动画效果。
总结
在 Flutter 中，Stack 和 Positioned 为开发者提供了灵活的层叠布局方式，特别适用于需要子组件重叠或在页面上悬浮的场景。通过结合使用 alignment、fit 等属性以及 Positioned 子组件，开发者可以轻松实现复杂的 UI 布局。
掌握 Stack 与 Positioned 的使用，能大大增强 Flutter 应用的布局能力，为构建美观且功能强大的界面提供更多可能性。