【Flutter】页面布局：层叠布局（Stack、Positioned）

最新推荐文章于 2025-03-10 20:17:24 发布

T0uken

最新推荐文章于 2025-03-10 20:17:24 发布

阅读量2.1k

点赞数 10

分类专栏： Flutter开发文章标签： flutter javascript 开发语言

本文链接：https://blog.csdn.net/2303_80346267/article/details/143100561

版权

Flutter开发专栏收录该内容

31 篇文章

订阅专栏

在 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 {
  @override
  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 {
  @override
  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 {
  @override
  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 {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isMoved = false;

  @override
  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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}