SwiftUI 列表(或 Form)子项中的 Picker 引起导航无法跳转的原因及解决

在这里插入图片描述

概述

在 SwiftUI 的界面布局中,列表(List)和 Form 是我们秃头码农们司空见惯的选择。不过大家是否知道:如果将 Picker 之类的视图嵌入到列表或 Form 的子项中会导致导航操作无法被触发。

在这里插入图片描述

从上图可以看到:当在 List 的子项中嵌入 Picker 时,所有互动操作都会聚焦在 Picker 上面,从而使得导航根本无法触发。

这种现象在 SwiftUI 6.0(iOS 18.1)中依然存在。

在本篇博文中,您将学到如下内容:

  • 概述
  • 1. 一个简单的问题
  • 2. “肿么”会这样?
  • 解决之道
  • 总结

想知道如何解决吗?超乎寻常的简单!
那还等什么呢?Let‘s go!!!😉


1. 一个简单的问题

首先是一段平淡无奇的的源代码:

enum JailConfig: Int, Identifiable, CaseIterable {case veryEasy = 1case easycase normalcase hardcase veryHardvar id: Int {rawValue}var desc: String {switch self {case .veryEasy:"非常容易"case .easy:"容易"case .normal:"一般"case .hard:"有点难"case .veryHard:"很难"}}
}@available(iOS 17, *)
struct V3_GameView: View {@State var jailConfig = JailConfig.normalvar body: some View {NavigationStack {List {NavigationLink("每日打卡") {ClockInView()}NavigationLink("抓住机会") {PressBlessingView(config: .normal)}NavigationLink {FingersJail(config: jailConfig)} label: {VStack(alignment: .leading) {Text("指尖监狱")LabeledContent {Picker("", selection: $jailConfig) {ForEach(JailConfig.allCases) { config inText(config.desc).tag(config)}}} label: {Text("难度")}}}}.listStyle(.plain).navigationTitle("游戏").toolbar {Text("大熊猫侯佩 @ \(Text("CSDN").foregroundStyle(.red))").foregroundStyle(.gray).font(.headline.bold())}}}
}

从代码中可以看到:我们在第 3 个列表项中嵌入了一个 Picker 视图,并将其包裹在 NavigationLink 的 label 中。这样做的意图是让用户在导航至子视图之前可以先选择一些配置信息(比如游戏难度)。

但这样简单的组合却带来了意想不到的“不良”结果:我们现在只能选择 Picker 的内容而无法进行导航了。

在这里插入图片描述

2. “肿么”会这样?

为了理解为何会如此,让我们先将布局稍微做一下调整。这次我们将 Picker 放在 NavigationLink 的外部:

VStack {NavigationLink {FingersJail(config: jailConfig)} label: {Text("指尖监狱")}LabeledContent {Picker("", selection: $jailConfig) {ForEach(JailConfig.allCases) { config inText(config.desc).tag(config)}}} label: {Text("难度")}
}

再次运行代码可以看到:结果和之前一毛一样。为了确保这不是 Xcode 预览中的一个 Bug,我特地在模拟器中也运行了一下,毫无二致。


诸多关于 Xcode “蛋疼” 预览(Preview)机制的进一步介绍,请小伙伴们移步如下链接观赏精彩的内容:

  • SwiftUI 界面动画调试一例:做码农最重要的是什么?相信自己!
  • Xcode13模拟器和预览(Preview)导致Mac处理器占用率急剧飙升的解决方法
  • SwiftUI Xcode项目新增单元测试(Unit Test)后预览(Preview)崩溃的解决
  • Xcode预览(Preview)显示List视图内容的一个Bug及解决
  • Xcode如何在预览(Preview)调试中避免与SwiftUI正常运行时环境不一致导致的崩溃
  • Xcode编写SwiftUI代码时一个编译通过但导致预览(Preview)崩溃的小陷阱
  • Xcode 15 预览 SwiftUI 视图中 @FetchRequest 查询结果不能正确刷新的解决

看来目前 SwiftUI 布局中,在列表(或 Form)子项里 VStack(或其它容器)内部如果有类似 Picker 之类的可交互视图,其它视图的交互性将会受到抑制(除非其它视图是 borderless 样式的按钮)。

知道了原因解决起来就十分简单了:只需把它们分开就行啦!

解决之道

如下代码所示,我们可以将 Picker 和原先列表子项中显示的内容完全“分离”:

NavigationLink {FingersJail(config: jailConfig)
} label: {Text("指尖监狱")
}            LabeledContent {Picker("", selection: $jailConfig) {ForEach(JailConfig.allCases) { config inText(config.desc).tag(config)}}} label: {Text("难度")
}
.padding(.top, -10)

不过,这样从界面上看会略显“割裂感”:

在这里插入图片描述

于是乎,我们可以用视图的 listRowSeparator 修改器隐藏中间的分隔线:

NavigationLink {FingersJail(config: jailConfig)
} label: {Text("指尖监狱")
}
.listRowSeparator(.hidden)

现在效果好极了:

在这里插入图片描述

或者我们可以将 Picker 和 NavigationLink 的内容统统放到一个 Section 中去,这样代码组织性会更好一些:

Section {NavigationLink {V3_FingersJail(config: jailConfig)} label: {Text("指尖监狱")}.listRowSeparator(.hidden)LabeledContent {Picker("", selection: $jailConfig) {ForEach(V3_JailConfig.allCases) { config inText(config.desc).tag(config)}}} label: {Text("难度")}.padding(.top, -10)
}

至此,我们成功的解决了博文开头那个问题!希望可以一解小伙伴们的燃眉之急,棒棒哒!💯


想要系统学习 Swift 的小伙伴们,欢迎来我的《Swift 语言开发精讲》专栏逛一逛哦:

在这里插入图片描述

  • 《Swift 语言开发精讲》

总结

在本篇博文中,我们讨论了 SwiftUI 列表(或 Form)子项中的 Picker 导致无法导航跳转的原因,并随后给出完美的解决方案。

感谢观赏,再会吧!😎

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/484802.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【51单片机】程序实验910.直流电机-步进电机

主要参考学习资料:B站【普中官方】51单片机手把手教学视频 前置知识:C语言 单片机套装:普中STC51单片机开发板A4标准版套餐7 码字不易,求点赞收藏加关注(•ω•̥) 有问题欢迎评论区讨论~ 目录 程序实验9&10.直流电机-步进电机…

python通过ODBC连接神通数据库

1、安装神通数据库 2、安装python 3、安装pyodbc pip3 install pyodbc-5.2.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl 注:pyodbc要和python版本相对应 4、安装unixodbc 5、配置神通数据库ODBC数据源 6、示例代码如下 #!/usr/bin/python…

日本IT|AWS技术方向都需要做哪些工作呢?

在日本IT行业中,AWS(亚马逊网络服务)技术方向的工作主要涉及利用AWS提供的各种服务和工具来构建、部署和管理云计算解决方案。具体来说,AWS技术方向的工作内容可能包括但不限于以下几个方面: 架构设计: 根据…

设计模式阅读笔记

参考:设计模式目录:22种设计模式 设计模式是什么? 设计模式是软件设计中常见问题的典型解决方案。 它们就像能根据需求进行调整的预制蓝图, 可用于解决代码中反复出现的设计问题。 设计模式与方法或库的使用方式不同&#xff0c…

如何利用Xshell上传文件到服务器

一.下载lrzsz包 sudo yum install lrzsz 二.上传和下载演示 1.上传 输入rz rz 从本机选择文件上传 2.下载 输入sz 文件名 sz 文件名 然后选择存储到本机的路径即可 这里就不演示了

【NoSQL数据库】Hbase基本操作——数据库表的增删改查

目录 一、Hbase原理 二、HBase数据库操作 三、遇到的问题和解决方法 一、Hbase原理 HBase的数据模型: 行键 时间戳 列族:contents 列族:anchor 列族:mime “com.cnn.www” T9 Achor:cnnsi.com”CNN” T8 Achor:…

2024 阿里云Debian12.8安装apach2【图文讲解】

1. 更新系统,确保您的系统软件包是最新的 sudo apt update sudo apt upgrade -y 2. 安装 Apache Web 服务器 apt install apache2 -y 3. 安装 PHP 及常用的扩展 apt install php libapache2-mod-php -y apt install php-mysql php-xml php-mbstring php-curl php…

【大模型】ChatGPT 提示词优化进阶操作实战详解

目录 一、前言 二、ChatGPT 提示词几个基本的优化原则 2.1 明确的提示词 2.1.1 提示词具体而清晰 2.1.1.1操作案例演示 2.2 确定焦点 2.2.1 操作案例演示 2.3 保持提示词的相关性 2.3.1 什么是相关性 2.3.2 提示词相关性操作案例一 2.3.2 提示词相关性操作案例二 三…

解决IDEA的easycode插件生成的mapper.xml文件字段之间逗号丢失

问题 easycode插件生成的mapper.xml文件字段之间逗号丢失,如图 解决办法 将easycode(在settings里面的othersettings)设置里面的Template的mapper.xml.vm和Global Config的mybatisSupport.vm的所有$velocityHasNext换成$foreach.hasNext Template的mapper.xml.vm(…

航空美食新升级,光明肉业携手东航食品打造经典辣肉面新篇章

在航空餐饮日益注重品质与创新的大环境下,各大航空公司纷纷在美食领域下功夫,力求为乘客提供更加多元化、高品质的餐饮体验。近日,东航那碗面再次成为行业焦点,其经典辣肉面在光明肉业的助力下实现了“创新”升级,为乘…

力扣1401. 圆和矩形是否有重叠

用矢量计算&#xff1a; class Solution { public:bool checkOverlap(int radius, int xCenter, int yCenter, int x1, int y1, int x2, int y2) {//矩形中心float Tx(float)(x1x2)/2;float Ty(float)(y1y2)/2;//强行进行对称操作&#xff0c;只考虑第一象限if(xCenter<Tx)…

解决 Maven 部署中的 Artifact 覆盖问题:实战经验分享20241204

&#x1f6e0;️ 解决 Maven 部署中的 Artifact 覆盖问题&#xff1a;实战经验分享 &#x1f4cc; 引言 在软件开发过程中&#xff0c;持续集成和持续部署&#xff08;CI/CD&#xff09;是提高开发效率和代码质量的关键手段。Hudson 和 Maven 是两种广泛使用的工具&#xff0…

在玩《黑神话:悟空》时游戏画面卡顿是什么原因?游戏画面卡顿要怎么解决?

《黑神话&#xff1a;悟空》游戏画面卡顿问题解析与解决方案 在探索《黑神话&#xff1a;悟空》这款引人入胜的游戏时&#xff0c;玩家可能会遇到游戏画面卡顿的困扰。本文将深入剖析《黑神话&#xff1a;悟空》游戏画面卡顿的原因&#xff0c;并提供实用的解决方法。 游戏画面…

尝试一下 InstantX/FLUX.1-dev-IP-Adapter 的效果

先从 hf-mirror 上下载 FLUX 模型&#xff1a; export HF_ENDPOINThttps://hf-mirror.com huggingface-cli download --resume-download black-forest-labs/FLUX.1-dev --local-dir FLUX.1-dev输入图片&#xff1a; 代码&#xff1a; import os from PIL import Imageimpor…

洛谷P4387 【深基15.习9】验证栈序列(c嘎嘎)

题目链接&#xff1a;P4387 【深基15.习9】验证栈序列 - 洛谷 | 计算机科学教育新生态 题目难度&#xff1a;普及/提高 解题思路&#xff1a;首先这道题很明显是要用栈来解决的&#xff08;题目都已经明示了&#xff09;&#xff0c;我们得利用好栈的后进先出的特点来模拟这道…

嵌入式驱动开发详解5(ioctl的使用)

文章目录 ioctl介绍应用层详解驱动层详解ioctl的cmd实验例程 ioctl介绍 linux内核给用户提供了两类系统调用函数&#xff1a;一类是数据操作函数&#xff0c;比如read、write…。 另外一类函数是非数据操作函数&#xff0c;比如ioctl…&#xff0c;用户程序可以用ioctl给底层设…

计算机网络-GRE基础实验二

前面我们学习了GRE隧道的建立以及通过静态路由指向的方式使得双方能够网络互联&#xff0c;但是通过静态路由可能比较麻烦&#xff0c;GRE支持组播、单播、广播因此可以在GRE隧道中运行动态路由协议使得网络配置更加灵活。 通过前面的动态路由协议的学习我们知道动态路由协议都…

QT6_UI设计——设置控件背景

1、右击选择控件 2、选择背景 color 颜色 background-color 背景颜色 alternate-background-color 交替背景颜色 border-color 边框颜色 border-top-color 边框顶端 border-right-color 边框右边 border-bottom-color 边框底部 border-left-color 边框左边 gridline-color 网…

AI 写作(一):开启创作新纪元(1/10)

一、AI 写作&#xff1a;重塑创作格局 在当今数字化高速发展的时代&#xff0c;AI 写作正以惊人的速度重塑着创作格局。AI 写作在现代社会中占据着举足轻重的地位&#xff0c;发挥着不可替代的作用。 随着信息的爆炸式增长&#xff0c;人们对于内容的需求日益旺盛。AI 写作能够…

Unity 模拟百度地图,使用鼠标控制图片在固定区域内放大、缩小、鼠标左键拖拽移动图片

效果展示&#xff1a; 步骤流程&#xff1a; 1.使用的是UGUI&#xff0c;将下面的脚本拖拽到图片上即可。 using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems;public class CheckImage : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragH…