在这里插入图片描述
在这里插入图片描述

作者：马振显（YM52e）
仓库地址：https://gitcode.com/feng8403000/FlutterfromBeginnertoAdvancedForHarmonyOS.git
联系邮箱：372699828@qq.com

引言

在Flutter开发中，Stack是一个非常重要的布局组件，它允许子组件堆叠在一起。与Row和Column的线性布局不同，Stack采用的是层叠布局，子组件会按照添加顺序依次堆叠，后面的组件会覆盖前面的组件。

对于待办事项应用来说，Stack尤为重要。它可以用来实现各种复杂的UI效果，如图片上叠加文字、浮动按钮、徽章标记等。掌握Stack的使用是构建精美UI的关键。

本文将深入探讨Stack的各种用法，包括基本属性、对齐方式、与Positioned配合使用，并结合待办事项应用的实际场景进行讲解。

一、Stack基本概念

1.1 Stack的作用

Stack组件用于将子组件堆叠在一起。它是Flutter中实现层叠布局的核心组件，能够让多个组件在同一位置重叠显示。

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Container(width: 100, height: 100, color: Colors.red),
  ],
)

在这个例子中，红色容器会叠加在蓝色容器之上。

1.2 Stack的工作原理

Stack的工作原理基于层叠模型：

  1. Stack会按照子组件的添加顺序依次堆叠
  2. 后面的组件会覆盖前面的组件
  3. 默认情况下，子组件会从左上角开始定位
  4. Stack的尺寸由所有子组件的最大尺寸决定

1.3 Stack的应用场景

Stack适用于以下场景：

  • 图片上叠加文字或图标
  • 浮动按钮（FloatingActionButton）
  • 徽章标记（Badge）
  • 多层级卡片效果
  • 自定义对话框

二、Stack核心属性

2.1 children属性

children是Stack最核心的属性，用于指定子组件列表：

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Container(width: 100, height: 100, color: Colors.red),
    const Text("叠加文字"),
  ],
)

2.2 alignment属性

alignment属性用于控制子组件的对齐方式：

Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Container(width: 100, height: 100, color: Colors.red),
    const Center(child: Text('居中对齐')),
  ],
)

Alignment预设值说明：

对齐位置 说明
topLeft 左上角
topCenter 顶部居中
topRight 右上角
centerLeft 左侧居中
center 正中心
centerRight 右侧居中
bottomLeft 左下角
bottomCenter 底部居中
bottomRight 右下角

2.3 fit属性

fit属性用于控制子组件如何适应Stack的尺寸：

Stack(
  fit: StackFit.expand,
  children: [
    Container(color: Colors.blue),
    const Center(child: Text("填满整个Stack")),
  ],
)

StackFit枚举值说明：

枚举值 说明
loose 子组件保持自身尺寸（默认）
expand 子组件扩展到填满Stack
passthrough 子组件继承父组件的约束

2.4 overflow属性

overflow属性用于控制超出Stack边界的子组件如何处理：

Stack(
  overflow: Overflow.clip,
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Container(width: 300, height: 300, color: Colors.red),
  ],
)

Overflow枚举值说明：

枚举值 说明
clip 裁剪超出部分（默认）
visible 显示超出部分

三、Stack与Positioned

3.1 Positioned的作用

Positioned组件用于在Stack中精确定位子组件。它必须作为Stack的直接子组件使用。

Stack(
  children: [
    Container(width: 300, height: 200, color: Colors.grey[200]),
    Positioned(
      top: 20,
      left: 20,
      child: Container(width: 50, height: 50, color: Colors.red),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Container(width: 50, height: 50, color: Colors.green),
    ),
  ],
)

3.2 Positioned的属性

Positioned提供了以下属性来控制位置：

属性 类型 说明
left double 左边距
top double 上边距
right double 右边距
bottom double 下边距
width double 宽度
height double 高度

3.3 四个方向定位

Stack(
  children: [
    Container(width: 300, height: 200, color: Colors.grey[200]),
    Positioned(
      top: 10,
      left: 10,
      right: 10,
      bottom: 10,
      child: Container(color: Colors.blue),
    ),
  ],
)

在这个例子中，蓝色容器会填满灰色容器内部，四周各留10像素的边距。

四、实际应用：待办事项界面

4.1 图片卡片布局

Stack(
  children: [
    Container(
      width: double.infinity,
      height: 150,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        image: const DecorationImage(
          image: NetworkImage('https://picsum.photos/400/200'),
          fit: BoxFit.cover,
        ),
      ),
    ),
    Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: Container(
        padding: EdgeInsets.all(8),
        color: Colors.black54,
        child: const Text('图片标题', style: TextStyle(color: Colors.white)),
      ),
    ),
  ],
)

4.2 浮动按钮布局

Container(
  height: 200,
  color: Colors.grey[100],
  child: Stack(
    children: [
      const Center(child: Text('列表内容区域')),
      Positioned(
        bottom: 20,
        right: 20,
        child: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    ],
  ),
)

4.3 徽章标记布局

Stack(
  children: [
    Icon(Icons.notifications, size: 48),
    Positioned(
      top: 0,
      right: 0,
      child: Container(
        width: 20,
        height: 20,
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(10),
        ),
        child: const Center(child: Text('3', style: TextStyle(color: Colors.white, fontSize: 12))),
      ),
    ),
  ],
)

4.4 待办卡片布局

Stack(
  children: [
    Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            offset: Offset(0, 2),
            blurRadius: 4,
          ),
        ],
      ),
      child: Column(
        children: [
          Row(
            children: [
              Checkbox(value: true, onChanged: null),
              SizedBox(width: 8),
              Expanded(child: Text("学习Flutter布局")),
            ],
          ),
          SizedBox(height: 8),
          Text("掌握Stack和Positioned组件", style: TextStyle(color: Colors.grey)),
        ],
      ),
    ),
    Positioned(
      top: -8,
      right: -8,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(4),
        ),
        child: const Text('置顶', style: TextStyle(color: Colors.white, fontSize: 12)),
      ),
    ),
  ],
)

五、Stack嵌套使用

5.1 Stack嵌套Stack

Stack(
  children: [
    Container(width: 300, height: 300, color: Colors.blue),
    Center(
      child: Stack(
        children: [
          Container(width: 200, height: 200, color: Colors.red),
          Center(child: Container(width: 100, height: 100, color: Colors.green)),
        ],
      ),
    ),
  ],
)

5.2 Stack嵌套Row/Column

Stack(
  children: [
    Container(width: 300, height: 200, color: Colors.grey[200]),
    Positioned(
      top: 20,
      left: 20,
      right: 20,
      child: Row(
        children: [
          Expanded(child: Container(height: 50, color: Colors.red)),
          SizedBox(width: 10),
          Expanded(child: Container(height: 50, color: Colors.blue)),
        ],
      ),
    ),
  ],
)

六、Stack与其他组件对比

6.1 Stack vs Row/Column

特性 Stack Row/Column
布局方式 层叠布局 线性布局
子组件位置 可以重叠 不重叠
适用场景 多层级界面 单列/单行布局
定位方式 使用Positioned 使用mainAxisAlignment/crossAxisAlignment

6.2 Stack vs Align

特性 Stack Align
功能 多层级布局 单组件对齐
子组件数量 多个 单个
定位方式 精确控制 对齐方式
适用场景 复杂叠加效果 简单对齐

七、常见问题与解决方案

7.1 问题1：子组件位置不对

问题描述：子组件的位置不符合预期。

解决方案：检查alignment属性或使用Positioned精确定位：

// 使用alignment
Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Container(width: 100, height: 100, color: Colors.red),
  ],
)

// 使用Positioned
Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(
      top: 50,
      left: 50,
      child: Container(width: 100, height: 100, color: Colors.red),
    ),
  ],
)

7.2 问题2：子组件被裁剪

问题描述：子组件超出Stack边界被裁剪。

解决方案：设置overflow为Overflow.visible：

Stack(
  overflow: Overflow.visible,
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Container(width: 300, height: 300, color: Colors.red),
  ],
)

7.3 问题3：Stack尺寸不符合预期

问题描述：Stack的尺寸不是预期的大小。

解决方案：检查fit属性或设置Stack的尺寸：

// 设置fit属性
Stack(
  fit: StackFit.expand,
  children: [
    Container(color: Colors.blue),
  ],
)

// 设置固定尺寸
Container(
  width: 300,
  height: 200,
  child: Stack(
    children: [
      Container(color: Colors.blue),
    ],
  ),
)

7.4 问题4：Positioned只能在Stack中使用

问题描述：在非Stack的父组件中使用Positioned报错。

解决方案：确保Positioned在Stack中使用：

// 错误：Positioned不在Stack中
Container(
  child: Positioned(child: Text("内容")),
)

// 正确：Positioned在Stack中
Stack(
  children: [
    Positioned(child: Text("内容")),
  ],
)

八、性能优化建议

8.1 避免不必要的Stack嵌套

// 不推荐：多余的嵌套
Stack(
  children: [
    Stack(
      children: [Container(color: Colors.red)],
    ),
  ],
)

// 推荐：直接使用一层Stack
Stack(
  children: [Container(color: Colors.red)],
)

8.2 使用const构造函数

const Stack(
  children: [
    const Container(color: Colors.blue),
    const Positioned(top: 10, child: const Text("内容")),
  ],
)

8.3 控制子组件数量

过多的子组件会影响渲染性能，应尽量控制在合理范围内。

九、总结

通过本文的学习，我们掌握了以下核心知识点：

  1. Stack用于将子组件堆叠在一起，是实现层叠布局的核心组件
  2. Stack支持alignment属性，用于控制子组件的对齐方式
  3. Stack支持fit属性，用于控制子组件如何适应Stack尺寸
  4. Stack支持overflow属性，用于控制超出边界的子组件处理方式
  5. Positioned用于在Stack中精确定位子组件，必须作为Stack的直接子组件
  6. Stack与Positioned配合使用，可以实现各种复杂的UI效果

Stack是Flutter开发中非常重要的组件，掌握它的使用是构建精美UI的关键。在实际开发中，它常与Container、Row、Column等组件配合使用，构建出各种复杂的布局效果。

参考资料

  1. Flutter官方文档：https://docs.flutter.dev/
  2. Stack组件API文档：https://api.flutter.dev/flutter/widgets/Stack-class.html
  3. Positioned组件API文档：https://api.flutter.dev/flutter/widgets/Positioned-class.html
# harmonyos # flutter # 华为 # 学习 # 鸿蒙 # 鸿蒙系统
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

80后通信老将，造出全球最薄AI录音卡，创业仅一年便盈利

而朱余浩对艾聆的定位则更广阔，他希望通过解决端侧AI的硬件承载问题，采用“硬件入口+模组PaaS + SaaS订阅”的三层架构，从而形成从产品交付到持续服务的完整商业闭环。“个人AI硬件跟着个人的日常工作和生活习惯走，有更高的使用频率，用户更容易形成产品依赖，而生产力工具的定位用户价值更高，用户也会更愿意为后续的持续服务和订阅买单。“天时”无疑是AI带来的产业机遇，所有硬件会用AI重新做一遍，用户

avatar 人工智能6S服务平台
cover

安全随行：SecurityKit 构筑鸿蒙7应用隐私防护底座

avatar 人工智能6S服务平台
cover

轻量化端侧智能新可能：鸿蒙7 Agent框架重塑应用交互形态

avatar 人工智能6S服务平台