Flutter Stack

17 Mar 2025 | 5 分钟阅读

Stack 是 Flutter 中的一个 Widget，它包含一个 Widget 列表，并将它们放置在彼此之上。换句话说，Stack 允许开发人员将多个 Widget 叠加到单个屏幕上，并从底部到顶部渲染它们。因此，第一个 Widget 是 最底部的 项，而 最后一个 Widget 是 最顶部的 项

与 Stack Widget 相关的关键点

以下是 Flutter Stack Widget 的关键点

Stack 中的子 Widget 可以是 定位的 或 未定位的。
定位的项封装在 Positioned Widget 中，并且必须具有一个非空属性
未定位的子 Widget 会自行对齐。它根据 Stack 的对齐方式显示在屏幕上。子项的默认位置在左上角。
我们可以使用对齐属性来更改 Widget 的对齐方式。
Stack 按照顺序放置子 Widget，第一个子 Widget 在底部，最后一个子 Widget 在顶部。如果我们要重新排序子 Widget，则需要在新的顺序中重建 Stack。默认情况下，每个 Stack 的第一个 Widget 具有最大尺寸，与其他 Widget 相比。

如何在 Flutter 中使用 Stack Widget？

下面的示例有助于快速理解 Stack Widget 的用法，其中包含三个大小递减的 Container

Stack(
  children: <Widget>[
    // Max Size
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.yellow,
    )
  ],
),

它将提供以下输出

Stack Widget 的属性

以下是与 Stack Widget 一起使用的属性

alignment：它决定了子 Widget 在 Stack 中的位置。它可以是 top、bottom、center、center-right 等。

Stack(
  alignment: Alignment.topCenter, // Center of Top
  children: <Widget>[ ]
)

textDirection：它决定了文本方向。它可以绘制文本，无论是 ltr（从左到右）还是 rtl（从右到左）。

Stack(
  textDirection: TextDirection.rtl, // Right to Left
  children: <Widget>[ ]
)

fit：它将控制 Stack 中未定位的子 Widget 的大小。 它有三种类型：loose、expand 和 passthrough。 loose 用于设置子 Widget 的小尺寸，expand 属性使子 Widget 尽可能大，而 passthrough 根据其父 Widget 设置子 Widget。

Stack(
  fit: StackFit.passthrough,
  children: <Widget>[ ]
)

overflow：它控制子 Widget，当其内容溢出 Stack 之外时，是否可见或被裁剪。

Stack(
  overflow: Overflow.clip, // Clip the Content
  children: <Widget>[ ]
)

clipBehavior：它决定内容是否会被裁剪。

Positioned

它不是 Stack 参数，但可以在 Stack 中用于定位子 Widget。以下是 Positioned Stack 的构造函数

const Positioned({
Key key,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
@required Widget child,
}) 

Stack Widget 示例

下面的代码解释了如何在 Flutter 中使用 Stack Widget。在此代码中，我们将尝试 Stack Widget 的大多数基本属性。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStackWidget(),
    );
  }
}

class MyStackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Stack Widget Example"),
        ),
        body: Center(
          child: Stack(
            fit: StackFit.passthrough,
            overflow: Overflow.visible,
            children: <Widget>[
              // Max Size Widget
              Container(
                height: 300,
                width: 400,
                color: Colors.green,
                child: Center(
                  child: Text(
                    'Top Widget: Green',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
              Positioned(
                top: 30,
                right: 20,
                child: Container(
                  height: 100,
                  width: 150,
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      'Middle Widget',
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    ),
                  ),
                ),
              ),
              Positioned(
                top: 30,
                left: 20,
                child: Container(
                  height: 100,
                  width: 150,
                  color: Colors.orange,
                  child: Center(
                    child: Text(
                      'Bottom Widget',
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    ),
                  ),
                )
              ),
            ],
          ),
        )
      ),
    );
  }
}

输出

当我们运行该应用程序时，我们应该得到与以下屏幕截图类似的 UI

Flutter IndexedStack

它是 Flutter 中的另一个 Stack Widget，它 通过指定其索引一次只显示一个元素。请参见下面的代码段

IndexedStack(
  index: 1,
  children: <Widget>[
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.yellow,
    )
  ],
)

IndexedStack 像普通的 Stack 一样接受子项，但它一次只显示一个子项。因此，它不是一个 Stack。我们使用它来根据我们的需要轻松地在一个子项和另一个子项之间切换。

IndexedStack Widget 示例

下面的代码解释了如何在 Flutter 中使用 Indexed Stack Widget

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStackWidget(),
    );
  }
}

class MyStackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Stack Widget Example"),
        ),
        body: Center(
          child: IndexedStack(
            index: 0,
            children: <Widget>[
              Container(
                height: 300,
                width: 400,
                color: Colors.green,
                child: Center(
                  child: Text(
                    'First Widget',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
              Container(
                height: 250,
                width: 250,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Second Widget',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ],
          ),
        )
      ),
    );
  }
}

输出

当我们运行该应用程序时，我们应该得到与以下屏幕截图类似的 UI

是否可以在 Flutter 中将 Stack 包装在 Stack 内部？

是的，可以将 Stack 包装在 Flutter 中的 Stack 内部。我们可以通过将第二个 Stack 包装在具有高度和宽度属性的 Container 内部来做到这一点。

请参见下面的代码以更清楚地理解它

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStackWidget(),
    );
  }
}

class MyStackWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Stack Widget Example"),
        ),
        body: Center(
          child: Stack(
            children: [
              Positioned(
                top: 100,
                child: Text(
                    "Stack#1",
                    style: TextStyle(color: Colors.black, fontSize: 20)
                ),
              ),
              Positioned(
                top: 150.0,
                child: Container(
                  height: 220,
                  width: 220,
                  color: Colors.green,
                  child: Stack(
                    children: [
                      Positioned(
                        top:160,
                        child: Text(
                          "Stack Inside Stack#1",
                          style: TextStyle(color: Colors.white, fontSize: 20)
                        ),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        )
      ),
    );
  }
}

当我们运行该应用程序时，我们应该得到与以下屏幕截图类似的 UI

下一主题Flutter 表单

Flutter Stack

与 Stack Widget 相关的关键点

如何在 Flutter 中使用 Stack Widget？

Stack Widget 的属性

Positioned

Stack Widget 示例

Flutter IndexedStack

IndexedStack Widget 示例

是否可以在 Flutter 中将 Stack 包装在 Stack 内部？

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter Stack

与 Stack Widget 相关的关键点

如何在 Flutter 中使用 Stack Widget？

Stack Widget 的属性

Positioned

Stack Widget 示例

Flutter IndexedStack

IndexedStack Widget 示例

是否可以在 Flutter 中将 Stack 包装在 Stack 内部？

相关帖子

Flutter 图标

Flutter 动画

Flutter 表单

Flutter Scaffold

Flutter 图片

Flutter 进度条

Flutter Snackbar

Flutter 按钮

Flutter 图表

Flutter Container

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器