SwiftUI: horizontal inside NavigationLink breaks导航 - 腾讯云开发者社区

文章/答案/技术大牛

发布

SwiftUI 4.0 的全新导航系统

欢迎大家在 Discord 频道[2] 中进行更多地交流长久以来，开发者对 SwiftUI 的导航系统颇有微词。...SwiftUI 4.0（ iOS 16+ 、macOS 13+ ）对导航系统作出了重大改变，提供了以视图堆栈为管理对象的新 API ，让开发者可以轻松实现编程式导航。本文将对新的导航系统作以介绍。...NavigationLink("SubView3",value: 3) NavigationLink("SubView4", destination: { SubView4() }) // 不要在编程式导航中混用声明式导航...4.0 之前的版本上使用类似的功能，可以参考我在用 NavigationViewKit 增强 SwiftUI 的导航视图[4] 一文中的实现方法其他增强除了上述的功能，新的导航系统还在很多其他的地方也进行了增强...下对 iPad 进行适配: https://www.fatbobman.com/posts/swiftui-ipad/ [4] 用 NavigationViewKit 增强 SwiftUI 的导航视图

13.3K6 2

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

高级主题- **列表和导航**：学习如何构建动态列表（List）和在视图之间进行导航（NavigationView、NavigationLink）。...- **NavigationView 和 NavigationLink**：实现视图之间的导航。 **实践**： - 创建一个简单的待办事项应用，显示任务列表并添加任务详情页面。...导航（Navigation）`NavigationView` 和 `NavigationLink` 用于实现视图之间的导航。...，包含支持导航的视图。...- `NavigationLink(destination: DetailView()) { ... }`: 创建一个导航链接，点击后会导航到 `DetailView`。

6.8K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

用NavigationViewKit增强SwiftUI的导航视图

用NavigationViewKit增强SwiftUI的导航视图如果想获得更好的阅读体验，请访问我的博客 www.fatbobman.com[1] 最近一直在为我的iOS健康管理app健康笔记3.0[...由于SwiftUI原生提供的导航手段能力有限，因此在之前的版本中，NavigationView总是使用的不是那么的顺手。...该扩展遵循以下几个原则： •非破坏性任何新添加的功能都不能影响当前SwiftUI提供的原生功能，尤其是不能影响例如Toolbar、NavigationLink在NavigationView中的表现•尽可能便于使用仅需极少的代码便可使用新增功能...，鱼和熊掌不可兼得•使用程序化的NavigationLink通过撤销根视图的程序化的NavigationLink（通常是isActive）来返回。...，因此需要为每个受管理的导航视图进行注册。

5.2K2 0

架构之路（五） —— VIPER架构模式（一）

路由器Router处理屏幕之间的导航。这与SwiftUI不同，在SwiftUI中，视图显示任何新视图。...当您将其放置在NavigationView中时，该链接将成为一个按钮，将destination推送到导航堆栈上。 content块可以是任何一个SwiftUI视图。...text: presenter.setTripName) .textFieldStyle(RoundedBorderTextFieldStyle()) .padding([.horizontal...最后一个方法调用router来获取waypoint的一个waypoint视图，并将其放到一个NavigationLink中。...Spacer() EditButton() Button(action: presenter.addWaypoint) { Text("Add") } }.padding([.horizontal

22K1 0

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

这两个错误包括：通过手势取消 Sheet 后，快速右滑导航容器导致应用锁死；以及在滚动中返回上层视图时导致应用崩溃。...通过手势取消 Sheet 后，快速右滑导航容器会导致应用锁死这是一个在 SwiftUI 所有版本中存在的错误，你可以在众多的论坛或聊天室里看到不少的开发者都在寻找解决方法。...如果我们认为问题出在这里，就需要使用编程式导航的方式来调整代码。为了不影响用户的使用习惯，我们禁用了 NavigationStack 自带的 Back 按钮。...在我们遇到问题的两个场景中，应用程序都恰好使用了导航容器，并且通过特定的操作，使 RunLoop 处于了适合 AG 打包更新的状态。...总结今年 SwiftUI 已经进入了第五个年头。随着版本的提高，SwiftUI 的功能也确实得到了相当程度的增加。

6.1K11 0

解读 chevron navigation：导航中的折叠指示与层级路径

在交互设计中，chevron icon 常被用来指示可展开、可收起或可进一步导航的项，具有明确的方向性和可点击性。...在 iOS 中，NavigationLink 默认会在列表项右侧显示 chevron 图标，提示用户点击可进入详情视图。...The default NavigationLink in SwiftUI appends a chevron to each list row.undefined在 SwiftUI 应用中，默认的 NavigationLink...以上示例中，chevron navigation 不仅是界面视觉元素，也成为口语或文档中对导航行为的简洁表达。...标题：解读 chevron navigation：导航中的折叠指示与层级路径

8531 0

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

6.3K2 0

SwiftUI 在 WWDC 24 之后的新变化

每年，SwiftUI 都会通过引入更多功能来赶上 UIKit。今年也不例外。让我们深入了解 SwiftUI 框架引入的新功能。...新的标签栏体验使用新的 Tab 类型，SwiftUI 提供了新的可定制标签栏体验，带有流畅过渡到侧边栏。...英雄动画SwiftUI 引入了 matchedTransitionSource 和 navigationTransition，我们可以在任何 NavigationLink 实例中配对使用。...HeroAnimationView: View { @Namespace var hero var body: some View { NavigationStack { NavigationLink....matchedTransitionSource(id: "myId", in: hero) } }}这使我们能够在 NavigationStack 内从一个视图导航到另一个视图时

5.8K1 0

从用SwiftUI搭建项目说起

some View { BaseTabbarView() } } 从最常见的场景搭建开始 ---- 在我们的日常开发中，标签（TabBar）+ 导航...，下面是最基本的导航+标签的git效果。...在UIKit中我们的导航、标签都是通过控制器来管理，但是在SwiftUI中他们分别是通过NavigationView+TabView管理的，我们得在认识上有一个基本的转变，从Controller到View...认识一下NavigationView，先看看下面的代码： NavigationView{ NavigationLink.init( destination...inline 就是我们常见的模式 /// .navigationBarTitle(title,displayMode: .inline) } 大概解析一下上面代码的 NavigationLink

6.2K2 0

苹果为傲慢付出了代价 | 肘子的 Swift 周报 #082

前一期内容｜全部周报列表欢迎点赞、转发原创使用 equatable() 避免 NavigationLink 预构建陷阱[4] NavigationLink是 SwiftUI 开发者非常喜欢使用的一个组件...，它巧妙地结合了 Button和导航跳转逻辑，大大简化了代码实现。...[20]再次带来一篇精彩的 SwiftUI + Metal 视觉实验。...NSAlchemy：扩展 SwiftUI 的 macOS 控件库[23] 尽管 SwiftUI 近年来在 macOS 平台上不断扩展，但依旧缺少不少关键控件。为此，Joshua J....预构建陷阱: https://fatbobman.com/zh/posts/using-equatable-to-avoid-the-navigationlink-pre-build-pitfall/

8431 0

自定义 Button 的外观和交互行为

通过 Style 改变组件的外观或行为是 SwiftUI 提供的一项非常强大的功能。...} .buttonStyle(.plain) }}let label = Label("Press Me", systemImage: "digitalcrown.horizontal.press.fill...幸好，SwiftUI 提供了 ButtonStyle 协议可以帮助我们定制交互动画。...：EditButton、Share、Link、NavigationLink（不在 List 中）等。...例如：无法为 List 中的 NavigationLink 设置样式在 Button 的 label 视图或 ButtonStyle 实现中添加的手势操作（例如 TapGesture ）将导致 Button

5.2K6 0

架构之路（六） —— VIPER架构模式（二）

linkBuilder(for trip: Trip, @ViewBuilder content: () -> Content ) -> some View { NavigationLink...router.makeWaypointView(for: waypoint) .onDisappear(perform: interactor.updateWaypoints) return NavigationLink...text: presenter.setTripName) .textFieldStyle(RoundedBorderTextFieldStyle()) .padding([.horizontal...) Button(action: presenter.addWaypoint) { Text("Add") } }.padding([.horizontal...presenter.isValid) } }.padding([.horizontal]) MapView(center: presenter.location

1.8K1 0

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

从 4.0 版本开始，苹果对之前 SwiftUI 有限的程序化导航能力进行了大幅度的增强，通过引入 NavigationStack 和 NavigationSplitView，开发者基本上具备了全程掌握应用的导航状态的能力...与 UIKit 使用的命令式导航方式不同，SwiftUI 作为一个声明式框架，感知与设置两者之间是二位一体的关系。读取状态即可获知当前的导航位置，更改状态便可调整导航路径。...因此在 SwiftUI 中，掌握两种导航容器的状态表述差异是实现自适应导航方案的关键。...Text("RootID:\(info.rootID)") Text("Current Level:\(info.level)") NavigationLink...本着“一案一议”的原则，当前方案可以实现对任意的导航逻辑进行转换。总结可以在此处[5] 获取本文的全部代码。一次编写便可对应多种设备，这本就是 SwiftUI 的一个重要特点。

6.1K3 0

Ask Apple 2022 与 SwiftUI 有关的问答（上）

是否有任何建议用来检测列表中的行选择，类似于 “NavigationLink”，但不导航到另一个视图（例如，显示 Sheet 或从列表中选择一个选项）？...在常规宽度下，我们在详细视图中有一个带有导航堆栈的侧边栏。在紧凑宽度下，我们有一个标签栏，每个标签都有一个导航堆栈。...A：目前最好的方法是建立一个导航状态模型对象，它持有导航状态的规范表示，它可以为你的正常和紧凑显示提供专门的程序绑定。...阅读 SwiftUI 4.0 的全新导航系统[13] ，了解它们之间的不同。位置偏移的方法与效率Q：在非线性位置（有 2 个轴）渲染带有圆形图像最好方法是什么？...A：紧凑（ compact ）确实对应于一个折叠的导航分割视图。如何改善一个包含大量 UITextField 的视图效率Q：我有一个包含 132 个 UITextField 的 SwiftUI 视图。

16.9K2 0

SwiftUI案例：尺寸自适应文本框

SwiftUI案例：尺寸自适应文本框效果目标实现文本框可以单行、多行输入的功能并可以自使用文本内容的高度思路突破 SwiftUI 并未提供可自适应高度的文本框组件，为实现自适应高度则需要继承...视图实现 import SwiftUI struct ContentView: View { var body: some View { Home() } } struct...= "" //自动更新的文本框高度 @State var containHeight: CGFloat = 0 var body: some View { //导航区视图控制...nil ) } ) .padding(.horizontal...Color.white) .cornerRadius(10) .padding() } //导航区域的头部文本信息

4.7K2 0

掌握 SwiftUI 的 Safe Area

掌握 SwiftUI 的 Safe Area 访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验 Safe Area（安全区域）是指不与导航栏、标签栏、工具栏或其他视图控制器提供的视图重叠的内容空间...SwiftUI 同时提供了一些方法和工具让开发者对安全区域有所控制。本文将探讨如何在 SwiftUI 中获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图的安全区域等内容。...对于根视图来说，safeAreaInsets 反映的是状态栏、导航栏、主页提示器以及 TabBar 等在各个边的占用数值。...edges: .bottom) // 扩展到顶部和底部.ignoresSafeArea(edges: [.bottom, .trailing]) // 横向扩展.ignoresSafeArea(edges:.horizontal....tint(.green) } .padding(.horizontal

10.7K3 1

掌握 SwiftUI 中的 ScrollView：滚动几何

SwiftUI 是一个强大的框架，它简化了在苹果平台上构建用户界面的过程。SwiftUI 中的一个基本组件是 ScrollView，它允许用户通过滚动导航内容。...完整代码示例分析下面是一个完整的 SwiftUI Demo，其中包含了我们刚刚讨论的 ScrollView、ScrollGeometry 和 onScrollGeometryChange 的使用示例。...secondarySystemBackground)) .cornerRadius(8) .padding(.horizontal...secondarySystemBackground)) .cornerRadius(8) .padding(.horizontal...总结今天，我们探讨了 SwiftUI 中的新 ScrollGeometry 类型和 onScrollGeometryChange 视图修饰符。

6.3K1 1

架构之路（七） —— iOS App的SOLID原则（一）

你需要内存存储来在 SwiftUI 预览中显示虚假数据。...Creating the Enum 在您的项目导航器中，创建一个名为 Enums 的新组。在其中创建一个名为 ReportRange.swift的新文件。...SwiftUI 列表具有用于两种报告类型的两个硬编码 NavigationLink 视图。如果要添加新类型的报告，例如每周报告，您必须在此处和 ReportRange中更改代码。这是低效的。...删除 List 的内容并将其替换为以下内容： ForEach(ReportRange.allCases, id: \.self) { value in NavigationLink( value.rawValue...Double, date: Date, comment: String) func prepare() } Xcode 会报错： Property 'currentEntries' declared inside

6K1 0

SwiftUI案例：自定义加载动画

SwiftUI案例：自定义加载动画效果目标使用图片实现自定义加载动画点击加载弹出层外部任意一点可关闭动画演示开关可控制图片采用“垂直移动动画”或“垂直加自身旋转动画” 外观配置视图的实现...ContentView.swift 案例通过在间隔时间内不断控制变量 animateBall:Bool 与 animateRotation:Bool 的值来间接地实现动画效果； import SwiftUI...View { var body: some View { NavigationView { Home() //使用Home()组件定义导航栏标题...rotateBall) { Text("图片是否旋转") } .padding() .padding(.horizontal....foregroundColor(.black) .padding(.vertical, 10) .padding(.horizontal

2.7K1 0

戴铭的 Swift 小册子

SPSidebar: View { var body: some View { List { Section("第一组") { NavigationLink...("第一项", destination: SPList(title: "列表1")) .badge(3) NavigationLink...第二项", destination: SPList(title: "列表2")) } Section("第二组") { NavigationLink...("第三项", destination: SPList(title: "列表3")) NavigationLink("第四项", destination: SPList(...Text("2") } label: { Label("Label", systemImage: "slider.horizontal

2.9K3 0

点击加载更多

SwiftUI 4.0 的全新导航系统

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

用NavigationViewKit增强SwiftUI的导航视图

架构之路（五） —— VIPER架构模式（一）

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

解读 chevron navigation：导航中的折叠指示与层级路径

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

SwiftUI 在 WWDC 24 之后的新变化

从用SwiftUI搭建项目说起

苹果为傲慢付出了代价 | 肘子的 Swift 周报 #082

自定义 Button 的外观和交互行为

架构之路（六） —— VIPER架构模式（二）

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

Ask Apple 2022 与 SwiftUI 有关的问答（上）

SwiftUI案例：尺寸自适应文本框

掌握 SwiftUI 的 Safe Area

掌握 SwiftUI 中的 ScrollView：滚动几何

架构之路（七） —— iOS App的SOLID原则（一）

SwiftUI案例：自定义加载动画

戴铭的 Swift 小册子

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐