SwiftUI 打造一款收缩自如的 HStack（三）：“魔镜魔镜，我爱你”

已于 2024-01-05 13:45:51 修改
阅读量1k 收藏 22
点赞数 29
分类专栏： Swift 语言开发精讲 文章标签： swiftui Mirror 反射 ViewBuilder alignment AnyView any 异构数组
于 2024-01-05 13:14:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mydo/article/details/135400290
版权
本文探讨了如何使用 SwiftUI 中的 Mirror 机制，摆脱 datas 数据集合，通过 @ViewBuilder 语法构建可收缩的 HStack。通过 Mirror 分析视图内部结构，将不同类型的视图保存在 [any View] 集合中，并用 AnyView 进行类型抹除，重构了 HStack 和对齐+ZStack 的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

概览

在前两篇博文中，我们分别讨论了用 HStack 和 对齐+ZStack 来实现收缩自如“HStack”的方法。

虽然看起来“各有千秋”，但实际上它们都拖着一坨厚重的 datas，这不禁为其“减分不少”。

在这里插入图片描述

而从上图演示中可以看到：我们完全摆脱了 datas 数据的桎梏，现在我们可以按照轻松惬意的 @ViewBuilder 语法来描述容器的子视图了！这是怎么做到的呢？

在本篇博文中，您将学到以下内容：

我们将会在最后一篇博文中，介绍如何用最“正统”的实现： Layout 自定义布局来作为“终极解决方案”！

最后一次剧透了哦！闲言少叙，Let’s go！！！😉

1. 前两种方式之弊端

了解本专栏 订阅专栏 解锁全文
SwiftUI 打造一款收缩自如的 HStack（一）：“原汤化原食”
享受开发，颠倒银河
01-04 1110
在本篇博文中，我们讨论了如何用 HStack 自身来打造一款可收缩的“HStack”，虽然读起来像一段绕口令但所幸我们最后成功的得偿所愿了。相信看完本篇后小伙伴们都会受益匪浅。
SwiftUI 打造一款收缩自如的 HStack（二）：对齐+ZStack
享受开发，颠倒银河
01-04 1433
在本篇博文中，我们在 SwiftUI 中用对齐机制和 ZStack 共同打造了一款可收缩的“HStack”。不同于之前“纯” HStack 的实现，用对齐可以全面把控容器内子视图的偏移做到随心所欲，小伙伴们值得拥有！
SwiftUI - VStack，HStack, ZStack 分别表示的布局样式
LJ·杨的博客
02-27 6218
SwiftUI出来已经有有一段时间了，虽然离实际使用还有一段距离，但是先熟悉一下，还是有必要的。 VStack，HStack, ZStack为布局控件，相当于UIKit中的UIStackView。代码及效果图如下： VStack: 垂直布局模式 VStack { Text("Ninja Z400") Text("世界因你为精彩...
SwiftUI基础组件之HStack、VStack、ZStack详解
最新发布
小洋人最happy的专栏
02-20 1280
子视图会按照添加的顺序依次堆叠，后添加的视图会覆盖在前添加的视图之上。是三个非常重要的容器视图组件，它们提供了强大而灵活的布局能力，能够帮助开发者轻松创建出各种复杂的界面。用于将其子视图按照水平方向排列，类似于将多个视图从左到右依次摆放。相对，它用于将其子视图按照垂直方向排列，即从顶部到底部依次摆放子视图。视图会在水平方向上依次排列，默认情况下它们之间会有一定的间距。属性用于指定子视图在垂直方向上的对齐方式。属性用于指定子视图在水平方向上的对齐方式。视图会按照顶部对齐的方式排列。属性用于指定子视图在。
SwiftUI自动换行HStack
qq_42568693的博客
04-16 3322
有时候，我们会遇到类似这样的需求，其中一种实现方式就是对alignmentGuide的灵活运用，如果您不太清楚刚刚这个名字的意思，我推荐您先看看我的这篇文章，算是alignmentGuide的基础 博客地址：alignmentGuide基础 写在前面 代码来自https://stackoom.com/question/3ytbp/带包装的SwiftUI-HStack 如侵权请联系我删除。 我添加了...
SwiftUI-HStack
不知名的上班族-老王
12-07 2014
文章目录前言HStack代码 前言 个人学习 SwiftUI 的记录，如有错误，请指教哈! HStack 横向布局, 就字面意思, 用来包裹其他 View, 默认一直从左到右的横向布局 先上效果图 代码 import SwiftUI struct XQHStackView: View { var body: some View { VStack { ...
[SwiftUI]HStack子视图布局
Gamin
03-22 795
包括HStack常见的居中、拉满、等分和挤压。
SwiftUI 打造一款收缩自如的 HStack（四）：Layout 自定义布局
享受开发，颠倒银河
01-08 1232
在本篇博文中，我们讨论了在 SwiftUI 中打造一款收缩自如“HStack”的最终实现。我们使用自定义 Layout 布局“恰如其分”的实现了 CollapsedLayout 布局容器从而圆满的完成了任务，棒棒哒！
SwiftUI 集合视图（Grid）拖放交换 Cell 的极简实现
享受开发，颠倒银河
02-22 1571
在本篇博文中，我们讨论了在 SwiftUI 中如何为集合视图（Grid）添加拖放交换其 Cell 的功能，小伙伴们可以从代码中真正体会到 SwiftUI 的简洁之美！
使用 SwiftUI 中的 HStack、VStack 和 ZStack 进行 Spacer 间隔和对齐
BUG？不存在的！
09-14 513
使用 SwiftUI 中的 HStack、VStack 和 ZStack 进行 Spacer 间隔和对齐在 SwiftUI 中，我们可以使用 HStack、VStack 和 ZStack 来构建用户界面。这些容器视图提供了一种方便的方式来管理和布局其他视图。在这篇文章中，我们将探讨如何在 SwiftUI 中使用 Spacer（间隔器）来实现视图之间的间隔和对齐。Spacer 是 SwiftUI 中一个非常有用的视图，它可以自动占用可用空间，并将其他视图推到容器视图中的边缘。
[SwiftUI]HStack部分区域和Spacer所占区域无法响应点击问题
Gamin
01-16 810
所占据的区域，都能响应点击事件，你可以使用。它只是一个会占据可用空间的透明视图。，则剩余的空间可能不会响应点击。可能没有足够的可点击区域。如果其内部的子视图没有占满。默认不接收点击事件。
SwiftUI（四）- 布局（VStack、HStack、ZStack）
weixin_39339407的博客
10-28 2461
本篇博客通过对SwiftUI中的VStack、HStack和ZStack的探讨，我们已经能够快速实现各种灵活的布局组合，再结合间距、对齐方式已经设置单个视图的内边距，可以轻松适配不同界面的需求。这种声明式的布局方式，不仅让代码更加简洁直观，还大大提高了开发效率。在实际项目开发中，灵活运用这些布局工具，将版主我们打造出更具美感、易与维护的UI设计。希望本篇博客能够为你的SwiftUI开发提供有价值的参考！
swift ui 布局 ——Stack（HStack、VStack、ZStack）
SHUIYI_24的博客
10-11 2889
swift ui 布局 ——Stack（HStask、VStack、ZStasck），Spacer() 填充空间配合Stack实现复杂布局
iOS SwiftUI 界面布局入门之Stack HStack《韩熙载夜宴图》
iCloudEnd的博客
02-14 706
使用SwiftUI构建界面从一开始就让我们和苹果的设计水平站在同一高度，让我们界面布局一开始就具有灵活性和适应性。 在界面布局方面，苹果可算是屡战屡败，我们开发者也是从一个坑爬进另外一个坑，我们经历了xib、storyboard、autolayout等一代代界面解决方案。如今我们进入SwiftUI纪元，在吸取了之前界面方案的教训，整合了Flutter、React、jQuery等...
SwiftUI之HStack和VStack的切换
╰つ栺尖篴夢ゞ
10-24 1896
SwiftUI 的各种堆栈是许多框架中最基本的布局工具，能够定义组视图，这些组视图可以按照水平、垂直或覆盖视图对齐。当涉及到水平和垂直的变体时( HStack 和 VStack)，需要在这两者之间动态的切换。例如，假如正在构建一个 App 其中包含 LoginActionsView，一个让用户登录时在列表中选择操作的类：VStack {以上代码中，使用了 fixedSize 防止按钮文本被截断，这仅是在确信给定的内容视图不会比视图本身更大的情况。
SwiftUI 之 HStack 和 VStack 的切换
网罗天下方法，方便你我开发！！！
10-13 1092
SwiftUI的各种堆栈是许多框架中最基本的布局工具，能够让我们定义组视图，这些组视图可以按照水平、垂直或覆盖视图对齐。当涉及到水平和垂直的变体时(HStack和VStack)，我们需要在这两者之间动态的切换。举个例子，假如我们正在构建一个app其中包含VStack {以上代码中，我们用到了fixedSize防止按钮文本被截断，这仅是在我们确信给定的内容视图不会比视图本身更大的情况。想了解更多信息，可以查看我的文章 -SwiftUI 布局系统第三章。
SwiftUI 如何实现HStack非对称居中
iCloudEnd的博客
05-29 1134
一、实战需求 希望手动实现类型导航条的组件，其中title本部分要居中，按钮要靠右侧。这个需求该如何实现。 二、解决方案 目前可以有一下几个方案L： 通过占位方式解决 通过ZStack实现 三、实战代码 1、通过占位实现 import SwiftUI struct ContentView: View { var body: some View { HStack{ Button("关闭") {} .hidden()
Swift UI 学习日记系列之ZStack 、VStack 、HStack
lose__的博客
07-19 727
ZStack 、VStack 、HStack的代码展示 ZStack 官方文档的定义是:A view that overlays its children, aligning them in both axes.(覆盖其子对象的视图，使它们在两个轴上对齐。) import SwiftUI struct ZStackTest: View { var body: some View { ZStack(alignment: .top){ Text("底层")
打造收缩自如的漂亮JavaScript下拉菜单
然后为触发器添加一个点击事件监听器，根据内容当前的显示状态切换其`display`属性，从而实现展开与收缩的效果。 ### 提升用户体验的下拉菜单 为了提升用户体验，我们还可以增加更多的交互效果： - **动画效果**...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊猫侯佩

赏点钱让我买杯可乐好吗 ;)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值