首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

掌握 SwiftUI 的 Safe Area

对于根视图来说,safeAreaInsets 反映的是状态栏、导航栏、主页提示器以及 TabBar 等在各个边的占用数值。...SafeAreaRegions 定义了三种安全区域划分: •container由设备和用户界面内的容器所定义的安全区域,包括诸如顶部和底部栏等元素。...相同的代码,在 iPhone 8 下的表现 image-20211120172325088 iOS 15.2 之前的版本,safeAreaInset 对 List 和 Form 的支持有问题(ScrollView...本文中的代码,在 Xcode 13.2 beta (13C5066c) 之后的版本都可以获得符合预期的表现。...此时,底部状态条的表现肯定不符合设计的初衷。 如果想让底部状态条固定,同时又保持 TextField 的自动避让能力,需要通过监控键盘的状态,做一点额外的操作。

7.7K31

用 SwiftUI 的方式进行布局

有关这方面的内容,请参阅 SwiftUI 布局 —— 尺寸( 下 )[4] 一文中“面子和里子”章节。...通过 matchedGeometryEffect 分别为该站位视图的顶部和底部设置了两个标识符以保存信息。 让视图一、视图二在两个状态下分别使用对应的 ID 位置,即可实现本文需求。...这意味着,在 ScrollView 中,子视图最好明确的设定尺寸( 提出明确地需求尺寸 )。因此,在上面的代码中,需要通过屏幕高度和视图一的高度差来计算上方的空白站位视图高度。...因此,只需要在状态切换时,调整视图二的对齐指南即可( 视图一将自动跟随视图二移动 )。 此种方式在视觉上与通过 VStack 的实现类似,但两者在需求尺寸上有明显不同。...VStack 的纵向需求尺寸为视图一与视图二的高度和,而通过 overlay 嵌套,纵向需求尺寸仅为视图二的高度( 尽管视觉上视图一在视图二的上方且紧密相连 )。

3.3K00
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    用 SwiftUI 的方式进行布局

    通过 matchedGeometryEffect 分别为该站位视图的顶部和底部设置了两个标识符以保存信息。 让视图一、视图二在两个状态下分别使用对应的 ID 位置,即可实现本文需求。...这意味着,在 ScrollView 中,子视图最好明确的设定尺寸( 提出明确地需求尺寸 )。因此,在上面的代码中,需要通过屏幕高度和视图一的高度差来计算上方的空白站位视图高度。...,采取不同的布局指南策略,并让视图具备不同的优先级状态( 状态切换时 ),以此来获得想要的布局结果。...因此,只需要在状态切换时,调整视图二的对齐指南即可( 视图一将自动跟随视图二移动 )。 此种方式在视觉上与通过 VStack 的实现类似,但两者在需求尺寸上有明显不同。...VStack 的纵向需求尺寸为视图一与视图二的高度和,而通过 overlay 嵌套,纵向需求尺寸仅为视图二的高度( 尽管视觉上视图一在视图二的上方且紧密相连 )。

    4.8K80

    GeometryReader :好东西还是坏东西?

    使用 GeometryReader 需要编写大量的辅助代码来计算和调整框架,这会增加编码量,降低代码的可读性和可维护性。...在本文发表之前,我发起了一个 投票[4] 询问大家对 GeometryReader 的看法,从结果来看,对其持负面印象的比例较高。...VStack 会结合视图的优先级,它的父视图给其的建议尺寸,在摆放时对子视图提出最终的建议尺寸。...另外,在某些情况下,GeometryReader 有可能返回尺寸为负数的数据。如果直接将这些负数数据传递给 frame,就可能会出现布局异常(在调试状态下,Xcode 会用紫色的提示警告开发者)。...为了进一步减少 GeometryReader 对性能的影响,我们需要注意以下两点: 只让少数视图受到几何信息变化的影响 仅传递所需的几何信息 以上两点符合我们优化 SwiftUI 视图性能的一贯原则,即控制状态变化的影响范围

    65770

    如何判断 ScrollView、List 是否正在滚动中

    欢迎大家在 Discord 频道[2] 中进行更多地交流判断一个可滚动控件( ScrollView、List )是否处于滚动状态在某些场景下具有重要的作用。...在绝大多数的时间里,Runloop 都处于 kCFRunLoopDefaultMode( default )模式中,当可滚动控件处于滚动状态时,为了保证滚动的效率,系统会将 Runloop 切换至 UITrackingRunLoopMode...我们将以是否可以持续接收到它们的位置信息为依据判断当前是否处于滚动状态。...ScrollView + VStack( HStack )这类的组合,只需为可滚动视图添加一个 scrollSensor 即可。...( 状态已变化为滚动中 ),保持手指处于按压状态并停止滑动,此方式会将此时视为滚动结束,而前两种方式仍会保持滚动中的状态直到手指结束按压IsScrolling我将后两种解决方案打包做成了一个库 —— IsScrolling

    3.8K40

    掌握 ViewThatFits

    ScrollView:如果理想状态的轴与滚动方向一致,则在滚动方向上一次性展示所有的子视图而无视父视图的建议尺寸。 VStack、HStack、ZStack:所有子视图在理想状态下的整体呈现。...唯一有些奇怪的是 VStack: VStack { Text("GeometryReader has been present since the birth of SwiftUI, playing...Rectangle().fill(.yellow) } .fixedSize() 对于这种视图,其“理想呈现”是一个复合的状态: 宽度:VStack 将逐个询问子视图的理想尺寸,使用其中宽度的最大值作为它的需求尺寸...高度:VStack 将所有子视图的理想尺寸高度和 Spacing 的和作为自己的需求尺寸。...在这个示例中,尽管 ScrollView 在理想状态下,呈现的宽度也超过了 ViewThatFits 允许的宽度,但由于它是最后一个子视图,因此最终选择了它。这也是一个典型的判断和呈现不一致的情况。

    23810

    【愚公系列】《AIGC辅助软件开发》013-AI辅助客户端编程:AI辅助 iOS 应用开发

    - `NavigationLink(destination: DetailView()) { ... }`: 创建一个导航链接,点击后会导航到 `DetailView`。...- `Text("Go to Detail")`: 显示导航链接的文本。- `.navigationTitle("Home")`: 设置导航栏的标题为 "Home"。...- `isLoggingIn`:用于模拟登录过程中的加载状态。### 4. `body` 属性 var body: some View { VStack { // ......### 4. 使用 `NavigationView` 和 `NavigationBar`如果你的界面是一个导航视图,你可以通过设置 `NavigationBar` 的内容来实现置顶效果。...通过合理运用 `VStack`、`ZStack`、`GeometryReader` 以及 `ScrollView`,你可以灵活地控制视图的位置和层级,确保重要的内容始终在顶部显示。

    9010

    在 SwiftUI 中实现视图居中的若干种方法

    image-20220829161755393至于上图中 Text 仍没有充分利用 HStack 全部宽度的原因,是因为没有为 HStack 设置明确的 spacing ,将其设置为 0 即可:HStack...Color 的宽度因此会出现两种可能的错误状态:当文本较长时,Text 会超过 Color 的宽度由于合成视图具备可变尺寸特性,VStack、HStack 在为其添加 spacing 时将可能出现异常...的建议尺寸由于 GeometryReader 拥有与 Color、Rectangle 类似的特征,会将给定的建议尺寸作为需求尺寸( 表现为占用全部可用空间 )GeometryReader 给 Text...我正以聊天室、Twitter、博客留言等讨论为灵感,从中选取有代表性的问题和技巧制作成 Tips ,发布在 Twitter 上。...Color 不只是顏色: https://www.ethanhuang13.com/p/swiftui-4-not-just-color[4] SwiftUI 布局 —— 尺寸( 下 ): https:

    6.8K40

    解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

    如果仅从上述两个例子考虑,无论状态调整是否及时,都不会出现什么错误的结果。但是,当应用程序处于某些特殊状态或用户进行某些特定操作时,状态更新的滞后会导致不可接受的后果。...请至少进入第三级视图 滚动当前视图 当视图处于滚动状态时,点击 NavigationStack 左上角的 “Back” 按钮。...通过自定义返回按钮以及扩展 UINavigationController 的方式,实现了在禁用 Back 按钮后仍支持手势返回,并先修改状态后再进行视图响应。...幸运的是,我从 @KyleSwifter[4] 的 解密 SwiftUI 背后的 AttributeGraph[5] 一文中找到了线索。...在我们遇到问题的两个场景中,应用程序都恰好使用了导航容器,并且通过特定的操作,使 RunLoop 处于了适合 AG 打包更新的状态。

    37020

    解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

    如果仅从上述两个例子考虑,无论状态调整是否及时,都不会出现什么错误的结果。但是,当应用程序处于某些特殊状态或用户进行某些特定操作时,状态更新的滞后会导致不可接受的后果。...请至少进入第三级视图滚动当前视图当视图处于滚动状态时,点击 NavigationStack 左上角的 “Back” 按钮。...通过自定义返回按钮以及扩展 UINavigationController 的方式,实现了在禁用 Back 按钮后仍支持手势返回,并先修改状态后再进行视图响应。...为了改善 AttributeGraph 的效率并减少其占用空间,SwiftUI 会在一些特定情况下对其进行清理和维护(例如通过 CFRunLoopObserverCreate 监听 Runtime 的空闲时机...在我们遇到问题的两个场景中,应用程序都恰好使用了导航容器,并且通过特定的操作,使 RunLoop 处于了适合 AG 打包更新的状态。

    761110

    在 SwiftUI 中创建自适应的程序化导航方案

    从 4.0 版本开始,苹果对之前 SwiftUI 有限的程序化导航能力进行了大幅度的增强,通过引入 NavigationStack 和 NavigationSplitView,开发者基本上具备了全程掌握应用的导航状态的能力...在栈中推送和弹出数据的过程对应了导航容器中添加和移除视图的操作。弹出全部数据相当于返回根视图,推送多个数据相当于一次性添加多个视图并直接跳转到最后数据所代表的视图。...下文中的方案一和方案二便是对这种能力的体现。但并非所有的状态表述都可在转换后实现程序化导航。...那么能否在导航列中使用 VStack 或 LazyVStack 实现程序化导航呢?...尽管仍存在一些不足,但新的导航机制已经在这一方面取得了长足的进步。唯一遗憾的是,仅支持 iOS 16+。希望本文能够对你有所帮助。

    4.3K30

    老人新兵 —— 一款 iOS APP 的开发手记

    考虑到身体也已经恢复到了一个不错的状态,就决定尝试做一个能满足自己需求的 app, 一方面是活动活动脑子,另一方面也算重拾当前的兴趣。...吐槽、提示、经验、总结本文基本上处于意识流状态,想哪写哪。下文是关于我在开发过程中遇到的一些问题,bug ,总结的技巧,获得的一点点经验等。没有必然的前后顺序,如果里面有错误,希望大家轻点点评 。...,不过就不优美了;切换页面 view 会重置状态,比如说 view1 里有个 ScrollView, 你已经进行了滚动,当你通过 TabView 切换到其他视图后切换回来,ScrollView 不会保留在原来的地方...GeometryReader PreferenceKey 等视图自我认知的好手段。...但我一时头脑发热在 app 已经进入了 review 的情况下改动了资费的元数据,结果 app 被拒,而此时该资费便始终处于审核状态。

    2.5K40

    SwiftUI 中掌握 ScrollView 的使用:滚动可见性

    前言我们的滚动 API 中又有一个重要的新增功能:滚动可见性。现在,你可以获取可见标识符列表,或者快速检查并监控 ScrollView 内视图的可见性状态。...在操作闭包内,我们获取可见标识符列表,并可以对可见项执行所需的操作。有时,视图需要在其可见性状态在 ScrollView 中发生变化时进行响应。...同样,当视图从可见状态转换为不可见状态,即显示的视口部分少于 10% 时,也会运行该闭包。...,并通过 NavigationView 进行导航。...总结今天,我们学习了如何跟踪 ScrollView 内特定视图的可见性,并监控可见标识符列表。示例展示了如何使用 SwiftUI 的滚动可见性修饰符来增强用户体验和交互性。希望能对你有所帮助。

    22421

    Swift 周报 第十四期

    使用 iOS 16.1 Beta 版和 Xcode 14.1 Beta 版,开发实时活动功能 新的 ActivityKit 框架现已在 iOS 16.1 Beta 版和 Xcode 14.1 Beta...App 的实时活动会显示在锁定屏幕和灵动岛中 — “灵动岛”作为一项全新设计,可以让用户直观、愉悦地体验 iPhone 14 Pro 和 iPhone 14 Pro Max。...实时活动功能和 ActivityKit 将包含在今年晚些时候推出的 iOS 16.1 中。当 iOS 16.1 发布候选版本可用时,您即可将配置了实时活动功能的 App 提交至 App Store。...努力打造更好的跨平台 Swift 生态系统 工作组不涉及的内容有: 涉及 Apple 已经支持的平台 涉及低资源和裸机平台 提议使用 conformance 关键字的让协议符合要求[7] conformance...SwiftUI 之 HStack 和 VStack 的切换 摘要: 本文介绍了当涉及到水平和垂直的变体时( HStack 和 VStack ),我们需要如何在这两者之间动态的切换。

    3.3K10

    模拟京东商城实现导航条隐藏功能

    View的高度) ①.界面上移的时候 - 隐藏的导航View显示: 4.png 原理色的导航条View显示 按钮View下移 tableView下移 tabView高度 -- (减去刚刚++的导航条View...这里使用的就是思路2的方法: a.隐藏系统默认的导航条View,然后自定义和导航条一模一样的UIView上去 [self.navigationController setNavigationBarHidden...方法中,直接通过 UIView的成员变量改View的状态,但是如果跨控制器呢?...addsubView:tableVIew] 所以简单的说,就是tableVIew和其他的View不在同一个控制器里 思路:跨控制器传值 (这里打算使用 - 代理模式) ==>思路: 因为是通过tableView...几个小细节: 细节1: 7.png 8.png 所以界面变化的步骤应该如下: 导航View隐藏 按钮View上移 外层scrollview上移,高度 ++ tableView要和scrollview

    1.8K120

    IOS15 beta 8 开发者预览版更新【附升级通道】

    “相机app”删除了快门按钮(很微小,不说基本看不出来,但显然也没什么实质性作用); 支持“跨屏拖拽”,比如聊天界面中的消息,长按不松手,同时上滑导航条,选中要粘贴的位置即可直接粘贴(虽然不跨屏也能实现...); “照片app”上滑可以查看图片详情和具体位置,可以详细看到镜头信息; iOS 15 beta3更新 在iOS15第二个测试版基础上,最大的改进便是对Apple自家浏览器Safari进行了功能上的改进以及界面的设计...在iOS15中,Apple引入了”专注“模式,在beta3中”专注状态“以及”电话“的位置,被分配到了专注模块中去,更适合不同的场景使用。...iOS 15 beta4更新 支持MagSafe外接电池; 设置中通知、备忘录的图标修改; Safari浏览器底部Reload按钮更换为底部直接加入了刷新按钮,浏览网页更加方便; iOS 15 beta5...拷贝以下链接(来源于网络)后,在自带的Safari浏览器中输入,选择“允许”,下载描述文件。

    1.1K10

    ReactNative 常见问题及处理办法(加固混淆)

    引言 ReactNative 作为一种跨平台开发框架,尽管强大,但也常伴随着一些问题。本文收集并解答了一些常见问题,为开发者提供了一些实用的技术指南。...RN中获取高度的技巧 获取屏幕高度和窗口高度的不同方法: // 屏幕高度(状态栏+安全区+下方虚拟按键操作区) Dimensions.get('screen').height // 窗口高度(状态栏+...安全区) Dimensions.get('window').height RN强制横屏UI适配问题 横屏下获取的宽、高不同于竖屏状态下的尺寸。...文件 第一项,填写我们需要重签名的 ipa 路径(当前导入的路径跟导出的路径) 设置签名使用的证书和描述文件 测试配置阶段使用开发测试证书,方便安装到手机测试混淆后ipa是否工作正常,测试ok,最后准备上架的时候再改成发布证书和发布描述文件...除了以上列举的问题外,还有诸如 Xcode 路径配置、iOS 下载链接拼接等问题都有相应的解决方案。

    32410
    领券