Flutter 基础 - 012: Stack 绝对布局

2024-01-16 06:15:00

各位程序员，欢迎来到 Flutter 基础系列的第十二部分，今天我们深入探究 Stack 控件，它在 Flutter 的布局系统中扮演着至关重要的角色。Stack 控件允许您使用绝对定位在屏幕上排列子控件，类似于 Android 中的 FrameLayout。

理解 Stack

Stack 控件是 Flutter 中一种特殊的容器控件，它允许您将子控件叠放在一起。您可以通过设置 left、top、bottom、right 属性来指定子控件的位置。这些属性指定了子控件相对于其父 Stack 控件的距离。

例如，以下代码创建一个 Stack，其中一个子控件位于左上角，另一个子控件位于右下角：

Stack(
  children: [
    Positioned(
      left: 0.0,
      top: 0.0,
      child: Text("左上角"),
    ),
    Positioned(
      right: 0.0,
      bottom: 0.0,
      child: Text("右下角"),
    ),
  ],
)

使用 Positioned 控件

Positioned 控件用于指定子控件在 Stack 控件中的位置。它接受 left、top、bottom、right 属性，用于设置子控件相对于父 Stack 控件的距离。

例如，以下代码创建一个 Positioned 控件，该控件将其子控件置于距离 Stack 控件左边缘 20 像素处：

Positioned(
  left: 20.0,
  child: Text("距离左边缘 20 像素"),
)

Stack 与 Positioned 的结合使用

Stack 和 Positioned 控件结合使用，可以创建灵活且复杂的 UI 布局。例如，您可以使用 Stack 来创建具有重叠内容或绝对定位元素的用户界面。

以下代码示例创建一个 Stack，其中一个子控件叠加在另一个子控件之上：

Stack(
  children: [
    Positioned(
      top: 0.0,
      bottom: 0.0,
      left: 0.0,
      right: 0.0,
      child: Container(
        color: Colors.blue,
      ),
    ),
    Positioned(
      top: 50.0,
      bottom: 50.0,
      left: 50.0,
      right: 50.0,
      child: Container(
        color: Colors.red,
      ),
    ),
  ],
)