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

iOS 14、Swift UI 2改变NavigationLink内所选列表项的背景色

iOS 14是苹果公司推出的移动操作系统版本,它引入了许多新功能和改进。其中一个重要的改变是Swift UI 2中的NavigationLink组件,它允许开发者自定义所选列表项的背景色。

在Swift UI 2中,可以通过修改NavigationLink的样式来改变所选列表项的背景色。要实现这一点,可以使用Swift UI的背景修饰符(background modifier)来自定义NavigationLink的外观。

下面是一个示例代码,演示如何使用Swift UI 2改变NavigationLink内所选列表项的背景色:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var selectedColor: Color? = nil
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: ColorDetailView(color: .red), tag: .red, selection: $selectedColor) {
                    Text("Red")
                }
                NavigationLink(destination: ColorDetailView(color: .blue), tag: .blue, selection: $selectedColor) {
                    Text("Blue")
                }
                NavigationLink(destination: ColorDetailView(color: .green), tag: .green, selection: $selectedColor) {
                    Text("Green")
                }
            }
            .listStyle(GroupedListStyle())
            .background(Color.white) // 设置列表的背景色
            
            Text("Selected color: \(selectedColor?.description ?? "None")")
                .padding()
        }
    }
}

struct ColorDetailView: View {
    let color: Color
    
    var body: some View {
        Rectangle()
            .fill(color)
            .frame(height: 200)
            .navigationBarTitle(Text(color.description), displayMode: .inline)
    }
}

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

在上面的示例代码中,我们创建了一个包含三个NavigationLink的列表。每个NavigationLink都有一个不同的tag(.red、.blue、.green),并且与selectedColor进行绑定。当用户选择某个列表项时,selectedColor将被更新为相应的tag值。

为了改变所选列表项的背景色,我们在NavigationView的List上应用了背景修饰符(background modifier),并设置为白色。这样,所选列表项的背景色将会是白色。

此外,我们还在ColorDetailView中展示了所选颜色的详细信息。在这个示例中,我们使用一个简单的矩形来表示颜色,但你可以根据需要自定义视图。

这是一个简单的示例,演示了如何使用Swift UI 2改变NavigationLink内所选列表项的背景色。你可以根据自己的需求进行进一步的定制和扩展。

腾讯云提供了一系列与移动开发相关的产品和服务,例如移动应用开发平台(Mobile Application Development Platform,MADP)、移动推送服务(Push Notification Service,PNS)等。你可以访问腾讯云官方网站了解更多信息:

请注意,以上只是腾讯云提供的一些相关产品和服务的示例,你可以根据自己的需求选择适合的产品和服务。

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

相关·内容

SwiftUI 4.0 全新导航系统

SwiftUI 4.0( iOS 16+ 、macOS 13+ )对导航系统作出了重大改变,提供了以视图堆栈为管理对象新 API ,让开发者可以轻松实现编程式导航。本文将对新导航系统作以介绍。...因此对于支持多硬件平台应用来说,最好针对不同场景分别使用对应导航控件。 两个组件两种逻辑 相较于控件名称上改变,编程式导航 API 才是本次更新最大亮点。...,目标视图处理在根视图对应 navigationDestination 中 NavigationLink("SubView2", destination: Target.subView2...toolbar 背景色只有在视图上滚时才会显示。...另一方面,新导航系统也向每一个开发者传递了明确信号,苹果希望应用能够为 iPad 和 macOS 提供更加符合各自设备特点 UI 界面。

10.2K62

从用SwiftUI搭建项目说起

SwiftUI我觉得能改变痛点就是这点,能让我们实时预览自己写UI效果,保持我们代码和界面的同步性!...这意味着我们后续在UI布局系统上可以逐渐摆脱对传统命令式 UI 编程依赖。达到真正平台无关!...---- 在我们日常开发中,标签(TabBar)+ 导航(Na)形式模式是随处可见,我们这次目的是利用SwiftUI搭建这样一个场景构建一个基本应用,包括登录和数据处理以及iOS...View ---- 我自己觉得,要想从UIKit转换到SwiftUI,需要我们最先转变概念就是 Controller -> View 一个改变,在使用SiwftUI写UI过程中,基本上是不在需要我们向...大概解析一下上面代码 NavigationLink,它是用来控制View之间跳转: destination:是跳转目标View,我们在做一些数据传递时候一般都是在这里说明

4.4K20

如何让 SwiftUI 列表变得更加灵活

viewModel.articles) { article in ... } .listStyle(.insetGrouped) } } 这样改变还是非常好...下拉刷新 就我个人而言,下拉刷新在我 SwiftUI 功能请求列表中非常重要,所以我很高兴看到今年版本增加了对这种非常常见 UI 范式内置支持。...SwiftUI 中使用,请查看昨天这篇文章[1],不要错过真正重要“在 Swift 中认识 async/await[2]”WWDC 会议。...由于系统会自动检测知道 viewModel.reload() 何时调用完成,因此可以防止发生重复刷新操作,并且可以更具状态显示和隐藏相应 UI。...item 上调用,而不是在列表本身上调用,这为我们提供了很大灵活性,可以根据想要构建 UI 类型动态隐藏或显示每个分隔符。

4.8K41

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

将背景扩展到安全区域Q:如果我有一个自定义容器类型,可以接受一个顶部和底部视图,是否有办法让 API 调用者将所提供视图背景扩展到安全区域,同时将内容( 如文本或按钮 )保留在安全区域?...在 NavigationSplitView 边栏中使用 LazyVStackQ:iOS 16 新 NavigationSplitView 当前只与主( master ) List 一起工作。...navigationDestination,这样侧边栏里 NavigationLink 就会取代详细栏根视图。...Too complex to type checkQ:我在 iOS 14 SwiftUI 中遇到一个问题,我试图有条件地显示 3 个符合 Shape 协议对象中一个。...所以更想知道你需要这个速度值有什么特定用途。可以尝试在获取位置改变同时记录时间变化来计算速度。不过如果是涉及到用户交互,建议衡量一下用户对速度敏感程度和交互效果本身,是否可以用更便捷方式实现。

14.7K30

戴铭 Swift 小册子

截图如下: 这个程序是Swift,按照声明式UI,响应式编程范式开发,源码也可以看看。与其讲一堆,不如调着试。 下面是文本内容。注:代码中简化变量名是为了能更快速关注到语言用法。...也就是函数里可以定义函数,函数内定义函数可以访问自己作用域外函数变量。...inout 表示是输入输出参数,函数可以在函数改变输入输出参数。defer 标识代码块会在函数返回之前执行。...internal:默认级别,模块可跨源文件调用,模块外不可调用。 fileprivate:只能在源文件访问。 private:只能在所在作用域访问。...苹果UI框架都是在主线程上进行UI更新,Combine通过Publisherreceive设置回主线程更新UI会非常简单。

2.1K30

解析SwiftUI布局细节(二)循环轮播+复杂布局

2、稍微复杂点View布局思路和一些细节知识 3、SwiftUI循环轮播图 这次总结首页UI布局如下,我们下面一点点解析: ?...NavigationLink 单击没法跳转,只有长按时候才能跳转,这个问题抛出来,有懂得小伙伴希望能给我说一下,这个问题我也一直没有解决!...传送门在这 下面是我们值得细说一些点: 1、值得注意 TabView + PageTabViewStyle 这是在iOS14中新出一个值得我们注意点,PageTabViewStyle...GeometryReader 主要作用就是能够获取到父View建议尺寸,这就是它主要作用,要没有它我们面临可能就是无休止传值了,SwiftUI 既然是声明式UI,按我理解你就没有办法去获取某一个视图父视图之类...有一个还得说明一下,GeometryReader 改变了它显示内容方式。在 iOS 13.5 中,内容放置方式为 .center。在 iOS 14.0 中则为:.topLeading。

11.8K20

iOS开发常用之测试调试、动态更新

KIF - 是一个开源用户界面UI测试框架。使用KIF,并利用iOS辅助功能API,你将能够编写模拟用户输入,例如点击,触摸和文本输入,自动化UI测试。...Peek.swift - 更友好,手势方式检查界面组件信息(相当于浏览器元素检查功能),界面调试利器。...是不可多得地学习WatchKit示例式教程(1.如何创建一个简单交互式计数器; 2.如何从手表上控制iOS应用程序; 3.如何在WatchKit应用程序和iOS应用之间共享数据; 4,如何创建一个拥有不同背景色数字时钟....-- swift watchOS-2-Sampler - 基于watchOS 2若干新特性,写了相应示例代码供大家学习,参考。...MMWormhole.swift - MMWormhole.swiftiOS或OS X扩展与宿主应用通讯框架。

3.4K20

Swift 周报 第十三期

本次发布会,iphone14pro 刘海依旧,但刘海减少 30% 变更为“药丸”,并引入灵动岛设计,通过刘海变换多种交互UI。视网膜 XDR2000 尼特峰值,实现息屏显示。...这些更新不会提供任何重大功能更改或 UI 改进,但会针对旧设备可能容易受到已知攻击提供保护。 苹果安全更新网站声明如下: 一位匿名研究人员提交 CVE-2022-32893。...(来源:IT之家) 苹果 iOS 16 更新,天气 App 新功能盘点 IT之家 8 月 31 日消息,苹果在 iOS 16 中对天气应用进行了一些改变,包括新通知类型,并增加了一些信息,从湿度、温度到能见度全方位为你提供服务...新“降水”类似于之前版本降水信息,显示了风暴将袭击位置地图,还可以放大显示 12 小时降雨预报,还有一个界面显示了过去 24 小时降水总量详情,以及在什么时间下了多少雨、雨夹雪或雪。...总之,iOS 16 更新了好多新奇功能哦,小伙伴快去试试吧。(来源:IT之家) 提案 通过提案 SE-0370[2] 改进指针系列初始化和缓冲区 提案已通过。

1.7K20

【愚公系列】2023年11月 Winform控件专题 MonthCalendar控件详解

1.3 CalendarDimensionsCalendarDimensions属性用于设置月历行数和数。默认情况下,MonthCalendar控件行数为1,数为1。...以下是设置CalendarDimensions属性示例:// 设置MonthCalendar控件行数为2数为2this.monthCalendar1.CalendarDimensions = new...System.Drawing.Size(1, 2);上述代码将MonthCalendar控件行数设置为1,数设置为2,因此该控件将显示2个月份。...TitleBackColor属性用于设置控件标题背景色。它默认值是SystemColors.ActiveCaption,可以通过设置它值来改变控件标题背景色。...如果需要改变每个月份区域标题背景色和前景色,需要通过自定义绘制来实现。

46611

iOS之深入解析Xcode 13正式版发布40个新特性

Xcode 13 Release Candidate 支持 iOS 9 及更高版本、tvOS 9 及更高版本以及 watchOS 2 及更高版本设备上调试。...; 可以通过选择 Edit > Copy Location 以 : 形式将所选内容的当前位置复制到剪贴板; 在 Swift 中将占位符扩展为闭包时,代码完成使用闭包参数名称而不是 ;...二十四、StoreKit Xcode 中 StoreKit 测试支持对使用 StoreKit 新现代基于 Swift API 构建应用购买进行全面测试。...二十八、App Store StoreKit 2 引入了一个现代基于 Swift API,它利用了新语言功能,如 Swift 并发性。...在 iOS 14 和 iPadOS 14 及更早版本中,当 autocorrectionType 设置为 UITextAutocorrectionTypeNo 时,QuickType 栏将被禁用。

8.7K40

架构之路 (七) —— iOS AppSOLID原则(一)

接着看下写作环境: Swift 5, iOS 14, Xcode 12 下面就是正文了。 要编写出色应用程序,您不仅需要提出一个好主意,还需要考虑未来。...由于您目标是学习如何改进现有代码,因此本 SOLID 教程假设您已经掌握了 SwiftiOS 基础知识。 打开入门项目。...这意味着您应该能够扩展您类型功能,而无需大幅更改它们以添加您需要内容。 3. Liskov Substitution 程序中对象应该可以用它们子类型实例替换,而不会改变该程序正确性。...然后,您将使用新表项更改 ContentView并创建一个新 DailyReportsDataSource。 只是为了添加您已经拥有的功能变体,这非常混乱并且需要做很多工作。...无论您是否了解基本 iOS 设计模式,刷新您对它们内存总是好。 我们 Fundamental iOS Design Patterns tutorial 可以提供帮助。

4.7K10

是时候学习Flutter了

微信公众号:南京Android部落 本文将花费您5分钟左右时间 什么是Flutter Flutter是谷歌在2018年2月份谷歌IO大会上推出一款跨平台UI框架,可以快速在Android和IOS...灵活UI 分层架构允许完全自定义,实现难以置信快速渲染和富有表现力、灵活设计 原生级性能 内置丰富widget:滚动、导航、图标和字体等,完全和IOS或者Android原生应用同样性能表现。...响应式框架 使用Flutter现代、响应式框架,和一系列基础widget,轻松构建您用户界面。使用功能强大且灵活API(针对2D、动画、手势、效果等)解决艰难UI挑战。...Flutter允许您复用现有的Java、Swift或ObjC代码,访问iOS和Android上原生系统功能和系统SDK。...如果您是一位经验丰富iOS或Android开发人员,则可以使用Flutter作为视图(View)层, 并可以使用已经用Java / ObjC / Swift完成部分(Flutter支持混合开发)。

1K30

App项目实战之路(三):原型篇

除了单独组件,墨刀还提供了母版和组合。默认母版有轮播图和下拉菜单,默认组合有弹出框、列表项、Action Sheet、日历等,都是一拖即用。不够用的话还可以自定义新母版和组合。...就拿按钮来说吧,可以设置背景色、前景色、边框、阴影、透明度、位置、宽高、旋转角度、圆角半径、圆形或正方形,还可以设置按钮文字属性,包括文字背景色、文本颜色、字体大小、字体样式、阴影、对齐方式,最后,...墨刀吸引我第三个优点就是对交互支持非常好。墨刀除了支持页面间交互,还支持页面交互。而且,页面交互不是通过复制页面来实现,而是通过为同个页面添加多个不同状态,实现状态切换。...Mockplus 在交互方面也是不足,页面交互设计只能复制页面,没墨刀方便。...接着,移动端技术标签有Android、iOS、Windows、React Native,Android根据语言还可以再分出Java和Kotlin,iOS则可以再分出Objective-C和Swift

1.7K30

Swift 周报 第十二期

黑客或可完全接管设备 提案:改进指针系列初始化和缓冲区 Swift 论坛:使用 Swift 5.5 / Xcode 14 构建后崩溃 推荐博文:iOS16 引入 SwiftUI Charts 新闻和社区...@看看新闻 App 和 app 购买项目即将实行税率和价格调整 2022 年 8 月 19 日下周开始,加纳和土耳其 App Store App 及 App 购买项目 (自动续期订阅除外) 价格将有所提高...新 iOS 系统将于今年秋天发布,可能是在 9 月份,届时苹果预计将发布 iPhone 14。...如下图: 在 iOS 16 中使用 SwiftUI Charts 自定义折线图[14] 摘要: iOS 16 中引入 SwiftUI Charts,可以快速实现各种统计图,通过图表直观呈现数据。...-16/ [14]在 iOS 16 中使用 SwiftUI Charts 自定义折线图: https://swdevnotes.com/swift/2022/customise-a-line-chart-with-swiftui-charts-in-ios

2.5K10

一次炫技差点引发惨案

4.29 日之后必须用 Xcode 15 打包,还好提前一周我们发现了这个问题,这样可以先降级到 Xcode 14 来开发打包,迭代功能也顺利上线了 但是 app 不能在 Xcode 15 上启动打包问题终究是要解决...:一个岛是 Swift 语言自身,另一个岛则是操作系统,比如 macOS 或 iOS。...在软件世界里,这座桥就是“应用程序二进制接口”(Application Binary Interface,简称 ABI)。 Swift ABI 稳定性可以比作这座桥结构变得坚固且不再改变。...,你没看错,iOS 开发全都没了(你说这种情况谁能想到) 那这时之前在项目中引入 Swift 就成为了一颗随时会引爆定时炸弹,后患无穷 所以现在回头看,Swift 如果未在 ABI 稳定前被引入,一直用...我发现这个页面其实并不是每个 UI 都是错乱,只是少数几个 UI 渲染有问题,那就可以分析一下这几个出问题 UI 和其他正常显示 UI 在 weex 写法有哪些区别,于是经过分析发现是三元运算符还有

10610
领券