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

SwiftUI:导航在包含节的列表中不能正常工作

基础概念

SwiftUI 是苹果推出的一个声明式 UI 框架,用于构建 macOS、iOS、watchOS 和 tvOS 应用程序。它允许开发者通过描述 UI 的外观和行为来构建界面,而不是通过编写大量的代码。

在 SwiftUI 中,导航是通过 NavigationViewNavigationLink 来实现的。NavigationView 提供了一个容器,可以在其中嵌套多个视图,并通过 NavigationLink 来实现视图之间的导航。

问题描述

在包含节的列表(例如 List 中嵌套 Section)中,导航可能无法正常工作。这通常是由于 NavigationLink 的使用不当或布局问题导致的。

原因

  1. NavigationLink 的使用不当NavigationLink 必须直接嵌套在 ListSection 内部,而不是嵌套在其他视图中。
  2. 布局问题:如果 NavigationLink 被包裹在其他视图中,可能会导致其无法正确识别点击事件。

解决方法

以下是一个示例代码,展示了如何在包含节的列表中正确使用 NavigationLink

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("Section 1")) {
                    NavigationLink(destination: DetailView(text: "Detail 1")) {
                        Text("Item 1")
                    }
                    NavigationLink(destination: DetailView(text: "Detail 2")) {
                        Text("Item 2")
                    }
                }
                
                Section(header: Text("Section 2")) {
                    NavigationLink(destination: DetailView(text: "Detail 3")) {
                        Text("Item 3")
                    }
                    NavigationLink(destination: DetailView(text: "Detail 4")) {
                        Text("Item 4")
                    }
                }
            }
            .listStyle(InsetGroupedListStyle())
            .navigationTitle("Navigation Demo")
        }
    }
}

struct DetailView: View {
    let text: String
    
    var body: some View {
        Text(text)
            .padding()
            .navigationTitle("Detail")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

解释

  1. NavigationView:作为最外层的容器,提供导航功能。
  2. List:用于显示列表数据。
  3. Section:用于将列表项分组,并提供标题。
  4. NavigationLink:用于实现视图之间的导航。destination 参数指定了目标视图,而 NavigationLink 的内容则是显示在列表中的文本。

应用场景

这种导航方式适用于需要在列表中展示多个分组,并且每个分组中的项可以导航到详细视图的场景。例如,一个包含多个类别的应用程序,每个类别下有多个项目,点击项目可以查看详细信息。

参考链接

通过以上方法,你应该能够在包含节的列表中实现正常的导航功能。如果仍然遇到问题,请检查 NavigationLink 的嵌套位置和布局,确保其直接嵌套在 ListSection 内部。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

因此 SwiftUI ,掌握两种导航容器状态表述差异是实现自适应导航方案关键。...推送和弹出数据过程对应了导航容器添加和移除视图操作。弹出全部数据相当于返回根视图,推送多个数据相当于一次性添加多个视图并直接跳转到最后数据所代表视图。...以导航容器出现时机( onAppear )作为重新构建状态起始点sizeClass 变化过程,其中值可能会出现重复变化情况。...本着“一案一议”原则,当前方案可以实现对任意导航逻辑进行转换。总结可以 此处[5] 获取本文全部代码。一次编写便可对应多种设备,这本就是 SwiftUI 一个重要特点。...每周也会对当周博客上新文章以及 Twitter 上发布 Tips 进行汇总,并通过邮件列表形式发送给订阅者。订阅下方 邮件列表[8],可以及时获得每周 Tips 汇总。

4.3K30

Ask Apple 2022 与 SwiftUI 有关问答(上)

是否有任何建议用来检测列表行选择,类似于 “NavigationLink”,但不导航到另一个视图(例如,显示 Sheet 或从列表中选择一个选项 )?...可以试着把 init 工作转移到 UITabBarController viewDidLoad 。...常规宽度下,我们详细视图中有一个带有导航堆栈侧边栏。紧凑宽度下,我们有一个标签栏,每个标签都有一个导航堆栈。...A:目前最好方法是建立一个导航状态模型对象,它持有导航状态规范表示,它可以为你正常和紧凑显示提供专门程序绑定。...不是因为它不能工作,而是因为如果你不深入了解 @State 和身份( identity )工作原理,它行为就会相当混乱。

12.3K20
  • Excel实战技巧55: 包含重复值列表查找指定数据最后出现数据

    文章详情:excelperfect 本文题目比较拗口,用一个示例来说明,如下图1所示,是一个记录员工值班日期表,安排每天值班时,需要查看员工最近一次值班日期,以免值班时间隔得太近。...A2:A10值,如果相同返回TRUE,不相同则返回FALSE,得到一个由TRUE和FALSE组成数组,然后与A2:A10所行号组成数组相乘,得到一个由行号和0组成数组,MAX函数获取这个数组最大值...,也就是与单元格D2值相同数据A2:A10最后一个位置,减去1是因为查找是B2:B10值,是从第2行开始,得到要查找B2:B10位置,然后INDEX函数获取相应值。...组成数组,由于这个数组找不到2,LOOKUP函数在数组中一直查找,直至最后一个比2小最大值,也就是数组最后一个1,返回B2:B10对应值,也就是要查找数据列表中最后值。...= .Cells(i, ColNum) Exit Function End If Next i End With End Function 然后,工作

    10.8K20

    架构之路 (五) —— VIPER架构模式(一)

    Entities组,您将看到与数据模型相关类。Trip和Waypoint稍后将作为VIPER架构Entities。因此,它们只保存数据,不包含任何功能逻辑。...路由器Router处理屏幕之间导航。这与SwiftUI不同,SwiftUI,视图显示任何新视图。...本例,主要entity是Trip,它包含一个路点Waypoints列表,路点是旅程各个站点。 这个应用程序包含一个DataModel类,它包含一个旅行列表。...由于演示者presenter工作是用数据填充视图,所以您希望从数据模型公开旅程trips列表。...当您将其放置NavigationView时,该链接将成为一个按钮,将destination推送到导航堆栈上。 content块可以是任何一个SwiftUI视图。

    17.5K10

    echarts图表Tab页width: 100%失效导致第一个Tab页之后Tab页图表不能正常显示问题

    解决Tab切换echarts图表不能正常显示问题: // 绘图div父容器宽度 let w = $('.figure').width(); $('#fig-t').css('width...', w); // 获取父容器宽度直接赋值给图表以达到宽度100%效果 $('#fig-f').css('width', w); // 获取父容器宽度直接赋值给图表以达到宽度100%效果..., 由于是图表初始化时候设置了容器宽度,图表并不能随窗口缩放自适应,下面是解决方法: window.onresize = function () { // 绘图div父容器宽度 let...').css('width', w); // 获取父容器宽度直接赋值给图表以达到宽度100%效果 $('#fig-e').css('width', w); // 获取父容器宽度直接赋值给图表以达到宽度...100%效果 if ((typeof fig_t) !

    2.3K20

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

    原文发表博客 肘子Swift记事本视图变化在前、状态变化在后 SwiftUI ,某些可编程控件执行一定操作时,会先更新视图,待视图变化完成后再修改与其对应状态。...通过手势取消 Sheet 后,快速右滑导航容器会导致应用锁死这是一个 SwiftUI 所有版本存在错误,你可以众多论坛或聊天室里看到不少开发者都在寻找解决方法。...它复现条件如下:iOS 16 系统,真机或模拟器上测试点击视图列表按钮,可以进入下一级视图。...我们遇到问题两个场景,应用程序都恰好使用了导航容器,并且通过特定操作,使 RunLoop 处于了适合 AG 打包更新状态。...随着版本提高,SwiftUI 功能也确实得到了相当程度增加。不过,即使最新版本一些对 UIKit(AppKit)进行二次包装控件,仍有不少细节处理不到位问题。

    707110

    苹果全新UI框架来了!可视化编程,自动化减少20%代码量

    Swift是苹果最新开发语言,有人呼吁谷歌取代TensorFlowPython。目前TOIBE排名18位: ? RedMond排名11 ?...而SwiftUI通过4种方式,解决了上述问题: 用一个新声明式UI结构,定义了布局外观和工作方式 更新UI预览会自动生成新Swift代码,反之,更改Swift代码也会更新UI预览 Swift任何绑定例如有效...感受一下SwiftUI代码风格 ? Github一个repo整理了WWDC 2019发布SwiftUI布局框架一些官方示例: SwiftUI Essentials 创建和组合视图: ?...创建列表导航栏: ? 处理用户输入: ? Drawing and Animation 绘图路径和形状: ? 动画视图和过渡 ? App Design and Layout 复杂界面组合: ?...比如,它只支持Swift,你不能在Obj-C里使用SwiftUISwiftUI目前还不是很成熟,正在从事iOS开发程序员可能更应该继续使用Obj-C,直到SwiftUI足够成熟。

    5.4K20

    AnyView 对 SwiftUI 性能影响

    前言AnyView 是一种类型擦除视图,对于 SwiftUI 容器包含异构视图非常方便。在这些情况下,你不需要指定视图层次结构中所有视图具体类型。...在这个测试,我们将通过整个消息列表三次滚动。没有 AnyView下面是没有泛型实现动画卡顿记录。...为了更好地理解结果,我们需要深入了解 SwiftUI 工作原理。在这个关于 SwiftUI 性能 WWDC 会话,来自 SwiftUI 团队 Raj 讨论了列表或表需要提前知道所有标识符。...总结总而言之,在这些情景包含异构视图可滚动列表),最好为容器不同视图使用具体类型。这可能听起来更复杂一些,但实际上你可以使其更简单,而不必过多地处理泛型。...例如,如果你有一个菜单,作为几个异构元素列表点击时显示不同导航目标,并且决定将这些视图包装为 AnyView,我测量结果表明与使用其他方法相比,性能没有区别。

    14200

    用 Flutter 搭建标签+导航框架

    前言 ---- Flutter 这个分类第一篇文章总结了下最新 Mac 搭建 Flutter 开发环境和对声明式UI这个理解东西,前面也有提过,准备像在 SwiftUI 分类那样花一些功夫来写一个...模式还是按照 SwiftUI ,我们写一个标签+导航模式,具体Demo 效果如下所示,我们在看几个比较具体概念性东西。 ?...Widget 是 Flutter 功能抽象描述,也就是一切皆为 Widget(这点反应在SwiftUI 我觉得和 View 性质有点像)。...Widget, 它提供了默认导航栏、标题和包含主屏幕 Widget body属性。...我们Demo,我们是直接在push方法里面写了具体页面的内容,这个正常肯定是另一个 Widget ,相信应该明白,我们看我们具体代码: // 跳转方法 void _pushSaved(

    1.3K10

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

    但是,SwiftUI 一些系统控件并没有完全遵循响应式设计原则,由此某些情况下会出现严重错误,影响用户体验,并使开发者无所适从。...通过手势取消 Sheet 后,快速右滑导航容器会导致应用锁死 这是一个 SwiftUI 所有版本存在错误,你可以众多论坛或聊天室里看到不少开发者都在寻找解决方法。...它复现条件如下: iOS 16 系统,真机或模拟器上测试 点击视图列表按钮,可以进入下一级视图。...我们遇到问题两个场景,应用程序都恰好使用了导航容器,并且通过特定操作,使 RunLoop 处于了适合 AG 打包更新状态。...随着版本提高,SwiftUI 功能也确实得到了相当程度增加。不过,即使最新版本一些对 UIKit(AppKit)进行二次包装控件,仍有不少细节处理不到位问题。

    34620

    解析SwiftUI布局细节(三)地图基本操作

    (点击地图位置会获取经纬度,反地理编译得到具体位置信息,显示列表SwiftUI怎样使用UIKit控件 ---- 我们来总结一下,SwiftUI怎么使用UIKit控件,中间连接就是...首先有一点,SwiftUI我们创建View都是Struct类型,但手势事件是#selector(),本质上还是OC东西,所以事件前面都是带有@Obic修饰符,但你要是Struct类型肯定是行不通...网络请求到数据我们怎样刷新页面(模拟) ---- 关于刷新数据这个是比较简单,用到就是我们前面提绑定数据模式,这点真和Rx挺像,你创建了一个列表,然后给列表绑定了一个数组数据源,...在前面第一小我们提到了地图获取到点击经纬度之后怎样更新地图上面的信息,其实用也是这点,绑定数据刷新!...,回到给你就是一个元素是 CLLocation 类型数组,我们Demo只取了First,你拿到是经纬度,你要想获取这个经纬度具体位置信息就得经过反地理编码,拿到某某市区某某街道某某位置信息

    2.1K10

    SwiftUI 4.0 全新导航系统

    访问我博客 www.fatbobman.com[1] 可以获得更好阅读体验。欢迎大家 Discord 频道[2] 中进行更多地交流 长久以来,开发者对 SwiftUI 导航系统颇有微词。...⚠️ 使用堆栈管理系统情况下,请不要在编程式导航混用声明式导航,这样会破坏当前视图堆栈数据 下面的代码,如果点击声明式导航,将导致堆栈数据重置。...最大区别是,SwiftUI 4.0 为我们提供了 NavigationSplitView 通过 List 快速绑定数据能力。...增强 SwiftUI 导航视图[4] 一文实现方法 其他增强 除了上述功能, 新导航系统还在很多其他地方也进行了增强。...定制 NavigationLink 样式 之前版本 SwiftUI ,NavigationLink 其实一直都是作为一种特殊 Button 存在

    10.3K62

    Xcode 11 初体验

    趁着最新更新正是版本 Xcode 11 于是就有这一篇 Xcode 11 初体验 Xcode工作改进(Workflows) 工程创建 创建工程进来,就会发现 User Interface 可以进行选择...将 Assistant、和 Vesion Editor下Autor 选项卡合并为一项,并从主导航移除,向下移到每个编辑面板,组成 Editor Option。...主导航只保留Code Review功能。 新增Add Editor、MiniMap。 我们这里着重介绍一下 Editor Options 、Add Editor、MiniMap 这3个选项。...指定文件打开位置 上面我们介绍了窗口分割, Xcode 11 ,你还可以按住 Option + Shift,然后左边点击要打开文件,这时会出现窗口选择提示 你可以用键盘,或者鼠标任意方式选择你要打开这个文件窗口...Git Tab页面,会展示出当前本地 Branches 列表、Stash Changes 列表、Tags 列表、Remotes 远程仓库列表

    3.2K10

    SwiftUI TextField进阶——格式与校验

    在为SwiftUI增加新功能时,要求自己尽量遵守以下原则: •优先考虑能否SwiftUI原生方法中找到解决手段•如确需采用非原生方法,尽量采用非破坏性实现,新增功能不能以牺牲原有功能为代价(需兼容官方...SwiftUI修饰方法) 以上原则,SheetKit——SwiftUI模态视图扩展库[3]和用NavigationViewKit增强SwiftUI导航视图[4]均有体现。...,尽管我们可以设置最终格式化样式,但是TextField并不能在文字录入过程对文本进行格式化显示。...不过除非SwiftUI对背后实现逻辑进行了较大修改,否则方案一最近几个版本仍会正常运行,而且方案一可以支持更早版本SwiftUI。...本文仅涉及了TextField部分内容,SwiftUI TextField进阶】其他篇幅,我们将探讨更多技巧和思路,让开发者SwiftUI创建不一样文本录入体验。

    8.2K20

    用NavigationViewKit增强SwiftUI导航视图

    用NavigationViewKit增强SwiftUI导航视图 如果想获得更好阅读体验,请访问我博客 www.fatbobman.com[1] 最近一直在为我iOS健康管理app健康笔记3.0[...2]做前期准备工作。...由于SwiftUI原生提供导航手段能力有限,因此之前版本,NavigationView总是使用不是那么顺手。...该扩展遵循以下几个原则: •非破坏性任何新添加功能都不能影响当前SwiftUI提供原生功能,尤其是不能影响例如Toolbar、NavigationLinkNavigationView表现•尽可能便于使用仅需极少代码便可使用新增功能...app主要用途是处理Deep Link,绝大多数时间都不是视图代码调用

    3.2K20

    SwiftUI:使用 @EnvironmentObject 从环境读取自定义值

    但是我们也可以将自定义对象发送到环境,并在以后将它们读出来,这使我们可以复杂应用程序更轻松地共享数据。...这意味着,如果视图A是导航视图,则所有压入导航堆栈视图都可以访问同一环境。但是,如果视图A以工作表(sheet)形式显示视图B,则它们不会自动共享环境数据,因此我们需要手动发送。...Apple已将此工作表情况描述为他们想要修复错误,因此我希望以后对SwiftUI更新中会有所改变。...向您展示一些代码之前,还有最后一件事:环境对象使用您已经学过ObservableObject协议,SwiftUI将自动确保共享同一环境对象所有视图更改时都会更新。...).environmentObject(user) DisplayView().environmentObject(user) } } } 这就是使我们代码正常工作所要做一切

    9.7K20

    SwiftUI 实现一个开源 App Store

    [iAppStore-04.jpg] 最重要是,我们把所有国家和地区商店,都集成一个面板,通过下拉列表选择,实现快速切换榜单。...2.2 App 详细页 App 详细页面,把开发者最关心参数显示最前面。另外,复制包含或者 App ID 是一个高频需求,App 描述和更新方案也高仿了 App Store 效果。...[iAppStore-07.jpg] 2.5 其它 为了方便开发者使用,App 列表长按时,会弹出操作列表,可以已经复制 App 信息或者快速打开 App Store 产品页,尽可能快捷获取内容!...切换图标可以选择自己显示图标等。 [iAppStore-08.jpg] 大家想要什么功能,可以评论区留言啊~ 三、调研工作 接下来,我们说一下要实现以上功能,需要 API 怎么调研出来!...比如,SwiftUI 还不支持 WebView,所以用 SFSafariViewController 桥接 View SwiftUI 组件显示会异常。

    2.1K20

    自定义 SwiftUI 符号图像外观

    foregroundStyle(.indigo)}.symbolRenderingMode(.hierarchical)symbolRenderingMode() 修饰符既可以直接应用于图像视图,也可以通过将其应用于包含多个符号图像父视图来环境设置... SwiftUI ,我们可以使用 symbolVariant() 修饰符来应用这些变体。...轮廓变体工具栏、导航栏和列表中非常有效,而填充变体则用于强调选择状态。...轮廓变体工具栏、导航栏和列表中非常有效,因为这些地方通常会与文本一起显示符号。将符号封装在圆形或方形等形状可以增强其可读性,特别是较小尺寸下。...将上述代码粘贴到 ContentView.swift 文件。运行项目,查看效果。结论SwiftUI增强符号图像可以显著改善应用程序外观和感觉。

    10810

    WWDC - SwiftUI - 初恋般感觉

    你可以通过Xcode新实时反馈功能,来优化你视图布局 。 第一 创建一个使用SwiftUI新Xcode项目。浏览画布、预览和SwiftUI模板代码。...当你构建Landmarks时候,你可以运用任何一个编辑器来进行编码工作:直接修改源代码、通过画布、通过inspector view检查器。...当我们创建SwiftUI视图控件时候,我们会把控件内容、布局还有一些行为放在body属性;然而body属性只返回了一个view。...你可以MapKitMKMapView类来展示渲染地图界面。 SwiftUI要使用UIView或者其子类,你需要让你view遵循UIViewRepresentable协议。...第一步 工程导航区,选择ContentView.swift文件。 第二步 在这三个text view控件外面,再嵌入一个VStack视图。

    3.8K10
    领券