Flutter &&鸿蒙next中的 Stack 和 Positioned 用法详解

简介: 在 Flutter 中,Stack 和 Positioned 是创建层叠布局和灵活定位元素的常用组件。Stack 可以将多个子组件叠加在一起,允许子组件相互重叠;Positioned 用于在 Stack 内部精确控制子组件的位置。本文详细介绍了它们的基本用法、属性和应用场景,包括动画、弹出层和悬浮按钮等。

在 Flutter 中,Stack 和 Positioned 是非常常用的组件,用于创建层叠布局和灵活的定位元素。它们特别适合于需要重叠的布局场景,如 UI 中的弹出框、动画效果、动态内容展示等。本文将详细介绍 Stack 和 Positioned 的基本用法、应用场景以及一些细节。

  1. Stack 组件
    Stack 是一个可以将多个子组件叠加在一起的容器。它的核心作用就是在一个二维空间中,允许子组件相互重叠、彼此覆盖。你可以像在 Photoshop 等图形设计软件中那样,通过不同的层级将多个元素叠加起来。

Stack 的基本用法
Stack 的子组件按顺序从下到上呈现,最先添加的子组件位于底部,而后添加的子组件会覆盖在其上。它并不限制子组件的尺寸和位置,你可以自由控制它们的布局。

Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Container(
width: 100,
height: 100,
color: Colors.red,
),
],
)
在上面的例子中,Stack 会将两个 Container 叠加在一起,蓝色的容器在底部,红色的容器在其上面,覆盖了蓝色容器的一部分。

Stack 组件的属性
alignment: 用于设置子组件的对齐方式。默认情况下,子组件的布局位置是相对于父 Stack 的左上角。如果需要不同的对齐方式,可以使用 alignment 属性进行调整。

Stack(
alignment: Alignment.bottomRight,
children: [
Container(width: 200, height: 200, color: Colors.blue),
Container(width: 100, height: 100, color: Colors.red),
],
)
在上面的例子中,红色的容器会被定位在蓝色容器的右下角。

fit: 用于设置子组件在 Stack 中的缩放方式,默认是 StackFit.loose,即子组件的大小不受限制。可以使用 StackFit.expand 来让子组件填充整个 Stack。

Stack(
fit: StackFit.expand,
children: [
Container(width: 200, height: 200, color: Colors.blue),
Container(width: 100, height: 100, color: Colors.red),
],
)
在这种情况下,红色的容器会被扩展以填满整个 Stack。

  1. Positioned 组件
    Positioned 用于在 Stack 内部精确控制子组件的位置。Positioned 通过相对于 Stack 的位置来确定子组件的位置。每个 Positioned 都有 top, right, bottom, 和 left 属性,用来控制子组件的距离。

Positioned 的基本用法
Stack(
children: [
Container(width: 200, height: 200, color: Colors.blue),
Positioned(
top: 20,
left: 20,
child: Container(width: 100, height: 100, color: Colors.red),
),
],
)
在上面的代码中,红色的容器被放置在蓝色容器的 (20, 20) 坐标位置,即距离 Stack 的顶部 20 像素,左侧 20 像素。

Positioned 的位置属性
top: 控制子组件距离父 Stack 顶部的距离。
bottom: 控制子组件距离父 Stack 底部的距离。
left: 控制子组件距离父 Stack 左侧的距离。
right: 控制子组件距离父 Stack 右侧的距离。
如果设置了 top 和 bottom,或者 left 和 right,则这些属性会自动相互影响,使组件在该方向上的尺寸自动适配。

示例:多个 Positioned 组件
Stack(
children: [
Container(width: 200, height: 200, color: Colors.blue),
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),
),
],
)
在这个例子中,蓝色的容器作为基础,红色的容器位于左上角,绿色的容器位于右下角,所有组件都通过 Positioned 精确定位。

  1. Stack 和 Positioned 组合应用
    示例:重叠的按钮和背景
    一个实际的场景是设计一个按钮层叠在图片上,通常可以使用 Stack 和 Positioned 来实现:

Stack(
children: [
Image.network('https://example.com/image.jpg', width: 300, height: 200, fit: BoxFit.cover),
Positioned(
bottom: 30,
right: 30,
child: ElevatedButton(
onPressed: () {},
child: Text('点击我'),
),
),
],
)
在这个例子中,我们将一张图片作为背景,并将一个按钮放置在图片的右下角。

  1. 使用 Stack 和 Positioned 做动画
    Stack 和 Positioned 也非常适合做动画。例如,可以通过 AnimatedPositioned 组件来实现元素的动态移动:

AnimatedPositioned(
duration: Duration(seconds: 1),
top: _topPosition,
left: _leftPosition,
child: Container(width: 50, height: 50, color: Colors.red),
)
每当 _topPosition 或 _leftPosition 的值发生变化时,AnimatedPositioned 会自动进行平滑过渡,移动元素到新的位置。

总结
Stack 和 Positioned 是 Flutter 中处理复杂布局的重要工具。Stack 可以将多个子组件堆叠在一起,而 Positioned 则能让我们精确地控制这些子组件的位置。结合使用这两个组件,我们可以实现灵活、富有创意的 UI 布局。通过调整属性和布局组合,Stack 和 Positioned 适用于多种不同的场景,包括动画、弹出层、悬浮按钮等。掌握它们的用法,将帮助你提升 Flutter 开发的效率与灵活性。
————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/lbcyllqj/article/details/143580752

目录
相关文章
|
18天前
|
API
HarmonyOS 3.1/4项目在DevEco Studio 5.0(HarmonyOS NEXT)版本下使用的问题
有读者在使用《鸿蒙HarmonyOS应用开发入门》书中的源码时遇到问题,主要原因是使用的DevEco Studio版本不同所致。本文提供了三种解决方案:1) 降级DevEco Studio至3.1版本;2) 按照5.0版本修改书中示例;3) 等待并使用《鸿蒙之光HarmonyOS NEXT原生应用开发入门》升级版书籍。
125 1
|
3天前
|
存储 JSON 开发工具
三、HarmonyOS NEXT应用开发:ArkTS工程目录结构(Stage模型)
本文介绍了HarmonyOS NEXT应用开发中ArkTS工程的目录结构(Stage模型),包括AppScope、entry、hvigor、oh_modules等主要目录及其作用。重点解析了entry目录下的src > main > resources目录结构,详细说明了base、限定符目录和rawfile的作用,以及如何引用资源文件。
22 1
|
22天前
|
JSON JavaScript 前端开发
harmony-chatroom 自研纯血鸿蒙OS Next 5.0聊天APP实战案例
HarmonyOS-Chat是一个基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序。这个项目使用了ArkUI和ArkTS技术栈,实现了类似微信的消息UI布局、输入框光标处插入文字、emoji表情图片/GIF动图、图片预览、红包、语音/位置UI、长按语音面板等功能。
47 2
|
1月前
|
监控 UED 开发者
鸿蒙next版开发:订阅应用事件(ArkTS)
在HarmonyOS 5.0中,ArkTS引入了强大的应用事件订阅机制,允许开发者订阅和处理系统或应用级别的事件,这对于监控应用行为、优化用户体验和进行性能分析至关重要。本文详细介绍了如何在ArkTS中订阅应用事件,并提供了示例代码,包括导入模块、创建观察者、设置事件参数等步骤。通过这些方法,开发者可以更智能地管理和响应应用事件。
82 11
|
1月前
|
安全 API 数据处理
鸿蒙next版开发:ArkTS组件通用属性(隐私遮罩)
在HarmonyOS 5.0中,ArkTS引入了隐私遮罩功能,用于保护用户隐私和数据安全。本文详细介绍了隐私遮罩的通用属性和使用方法,并提供了示例代码。隐私遮罩支持Image和Text组件,在数据加载或处理过程中防止敏感信息泄露,提升用户体验和数据安全性。
57 11
|
1月前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
68 10
|
1月前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
60 8
|
1月前
|
API 内存技术
鸿蒙next版开发:相机开发-拍照(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了一套完整的API来管理相机功能,特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能,包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态,并提供代码示例进行详细解读。通过本文,你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
68 7
|
1月前
|
监控 开发者
鸿蒙next版开发:使用HiDebug获取调试信息(ArkTS)
在HarmonyOS 5.0中,HiDebug是一个强大的应用调试工具,可帮助开发者获取系统的CPU使用率、内存信息等关键性能数据。本文详细介绍了如何在ArkTS中使用HiDebug,并提供了示例代码,帮助开发者进行性能分析和问题诊断。
58 7
|
1月前
|
开发者 容器
鸿蒙next版开发:ArkTS组件通用属性(文本通用)
在HarmonyOS 5.0中,ArkTS提供了丰富的文本通用属性,如textAlign、maxLines、textOverflow、fontSize、fontColor、fontStyle、fontWeight、fontFamily、lineHeight、letterSpacing和decoration等,用于实现多样的文本显示和样式效果。本文详细解读了这些属性,并提供了示例代码,帮助开发者更好地利用这些工具,提升应用界面的美观和实用性。
63 8