开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

SwiftUI - HStack NavigationLink "buttons“将buttonStyle分别添加到两个元素？

SwiftUI是苹果公司推出的一种用户界面(UI)框架，用于开发iOS、macOS、watchOS和tvOS应用程序。它采用声明式语法，简化了界面的构建过程，并提供了丰富的UI组件和布局选项。

HStack是SwiftUI中的一种布局容器，用于将视图水平排列。NavigationLink是一种用于导航的视图，可以在用户点击时跳转到其他视图。

要将buttonStyle分别添加到HStack中的两个元素，可以使用modifier来为每个元素添加不同的样式。下面是一个示例代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                HStack {
                    NavigationLink(destination: Text("Button 1")) {
                        Text("Button 1")
                            .padding()
                            .background(Color.blue)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    .buttonStyle(PlainButtonStyle()) // 添加buttonStyle
                    
                    NavigationLink(destination: Text("Button 2")) {
                        Text("Button 2")
                            .padding()
                            .background(Color.red)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                    .buttonStyle(BorderlessButtonStyle()) // 添加buttonStyle
                }
                .padding()
            }
            .navigationTitle("HStack Navigation")
        }
    }
}

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

在上面的代码中，我们为第一个按钮使用了PlainButtonStyle，为第二个按钮使用了BorderlessButtonStyle。你可以根据需要选择不同的buttonStyle。

这个例子中，我们使用了NavigationLink来实现按钮点击后的导航，目标视图是一个简单的文本视图。你可以根据实际需求将destination替换为其他视图。

腾讯云提供了云计算相关的产品和服务，你可以参考以下链接了解更多信息：

请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

通过 Style 改变组件的外观或行为是 SwiftUI 提供的一项非常强大的功能。本文将介绍如何通过创建符合 ButtonStyle 或 PrimitiveButtonStyle 协议的实现，自定义 Button 的外观以及交互行为。

06

SwiftUI 4.0 的全新导航系统

长久以来，开发者对 SwiftUI 的导航系统颇有微词。受 NavigationView 的能力限制，开发者需要动用各种技巧乃至黑科技才能实现一些本应具备基本功能（例如：返回根视图、向堆栈添加任意视图、返回任意层级视图、Deep Link 跳转等）。SwiftUI 4.0（ iOS 16+ 、macOS 13+ ）对导航系统作出了重大改变，提供了以视图堆栈为管理对象的新 API ，让开发者可以轻松实现编程式导航。本文将对新的导航系统作以介绍。

06

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

随着苹果对 iPadOS 的不断投入，越来越多的开发者都希望自己的应用能够在 iPad 中有更好的表现。尤其当用户开启了台前调度（ Stage Manager ）功能后，应用对不同视觉大小模式的兼容能力就越发显得重要。本文将就如何创建可自适应不同尺寸模式的程序化导航方案这一内容进行探讨。

03

使用 SwiftUI 为 macOS 创建类似于 App Store Connect 的选择器

最近，我一直在为我的应用开发一个全新的界面，它可以让你查看 TestFlight 上所有可用的构建，并允许你将它们添加到测试群组中。

03

优化在 SwiftUI List 中显示大数据集的响应效率

拥有优秀的交互效果和手感，是很多 iOS 开发者长久以来坚守的原则。同样一段代码，在不同数据量级下的响应表现可能会有云泥之别。本文将通过一个优化列表视图的案例，展现在 SwiftUI 中查找问题、解决问题的思路，其中也会对 SwiftUI 视图的显式标识、@FetchRequest 的动态设置、List 的运作机制等内容有所涉及。本文的范例需运行在 iOS 15 及以上系统，技术特性也以 SwiftUI 3.0 为基础。

02

如何在 Swift 中取消一个后台任务

Swift 5.5中引入的 async/await 语法，允许用更可读的方式来编写异步代码。异步编程可以提高应用程序的性能，但必须取消不需要的任务，以确保不需要的后台任务不会干扰到应用程序。本文演示了如何明确地取消一个任务，并展示了子任务是如何自动取消的。

03

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

List 可能是 SwiftUI 附带的内置视图中最常用的一种，它使我们能够在任何 Apple 平台上呈现“类似于表格视图”的用户界面。今年，List 获得了许多非常重要的升级，使其更加灵活和易于定制。让我们看看都有哪些新功能。

04

用NavigationViewKit增强SwiftUI的导航视图

如果想获得更好的阅读体验，请访问我的博客 www.fatbobman.com[1]

02

SwiftUI 之 HStack 和 VStack 的切换

SwiftUI 的各种堆栈是许多框架中最基本的布局工具，能够让我们定义组视图，这些组视图可以按照水平、垂直或覆盖视图对齐。

01

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

VIPER架构模式是MVC或MVVM的另一种选择。虽然SwiftUI和Combine框架创建了一个强大的组合，可以快速构建复杂的ui和在应用程序中移动数据，但它们也面临着各自的挑战和对架构的看法。

01

解析SwiftUI布局细节（二）循环轮播+复杂布局

上一篇我们总结的主要是VStack里面的东西，由他延伸到 @ViewBuilder, 接着我们上一篇总结的我们这篇内容主要说的是下面的几点，在这些东西说完后我准备解析一下苹果在SiwftUI文档中说道的比较好玩的一个东西，具体的我们后面在看。这篇我们还是说我们关于SwiftUI的东西，再提一下Demo代码我已经提交上Git了，目前Demo进度为一级页面基本上结束，地图点击大头针的添加也刚处理完，代码有需要的小伙伴可以去Git看看，项目地址

02

Swift 笔记#2 - SwiftUI 基础控件 Button 必知必会

本期学习 SwiftUI 基础控件 Button 的使用，内容基本涵盖了 Button 高频的使用场景；通过本节课你将收获：

02

SwiftUI 与 Core Data —— 安全地响应数据

保证应用不因 Core Data 的原因导致意外崩溃是对开发者的起码要求。本文将介绍可能在视图中产生严重错误的原因，如何避免，以及在保证视图对数据变化实时响应的前提下如何为使用者提供更好、更准确的信息。由于本文会涉及大量前文中介绍的技巧和方法，因此最好一并阅读。

02

使用 SwiftUI 创建一个灵活的选择器

最近，在我正在开发一个在 Dribbble 上找到的设计的 SwiftUI 实现时，我想到了一个点子，可以通过一些酷炫的筛选器扩展该项目以缩小结果列表。

02

SwiftUI 布局 —— 对齐

“对齐”是 SwiftUI 中极为重要的概念，然而相当多的开发者并不能很好地驾驭这个布局利器。在 WWDC 2022 中，苹果为 SwiftUI 增添了 Layout 协议，让我们有了更多的机会了解和验证 SwiftUI 的布局原理。本文将结合 Layout 协议的内容对 SwiftUI 的 “对齐” 进行梳理，希望能让读者对“对齐”有更加清晰地认识和掌握。

02

WWDC - SwiftUI - 初恋般的感觉

要在Xcode中预览画布上的视图并与之交互，请确保您的Mac运行的是macOS 10.15 beta版。

01

visionOS开发之Ornament

01

iOS17适配指南之SwiftData(二)

前文iOS17适配指南之SwiftData(一)使用 UIKit 对 SwiftData 进行了简单使用。其实 SwiftData 配合 SwiftUI 才是 Apple 的初心，因此本文以 SwiftUI 的视角进行 SwiftData 的使用讲解。

03

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

Ask Apple 为开发者与苹果工程师创造了在 WWDC 之外进行直接交流的机会。本文对本次活动中与 SwiftUI 有关的一些问答进行了整理，并添加了一点个人见解。本文为下篇。

03

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

将某个视图在父视图中居中显示是一个常见的需求，即使对于 SwiftUI 的初学者来说这也并非难事。在 SwiftUI 中，有很多手段可以达成此目的。本文将介绍其中的一些方法，并对每种方法背后的实现原理、适用场景以及注意事项做以说明。

04

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

众所周知，SwiftUI 是一个响应式框架，这意味着，当数据源发生变化时，框架会自动更新视图。同样，当我们想调整视图显示时，应直接对状态进行修改。但是，SwiftUI 中的一些系统控件并没有完全遵循响应式的设计原则，由此在某些情况下会出现严重的错误，影响用户体验，并使开发者无所适从。

SwiftUI - 百行代码变十行，Swift再创辉煌

苹果开发者大会 WWDC 2019 在北京时间今天凌晨开幕。在这场大会上除了「史上最难看 Mac 主机」、首次出现的iPadOS以外，我们还终于可以对饱受诟病的iTunes说再见了。而对于开发者来说，新发布的 SwiftUI 可能是最吸引人的特性，在苹果公司软件工程高级副总裁Craig Federighi的演示中，我们可以轻松地把一百行的前端代码缩减到十几行。

04

在 SwiftUI 中用 zIndex 调整视图显示顺序

本文将对 SwiftUI 的 zIndex 修饰符做以介绍，包括：使用方法、zIndex 的作用域、通过 zIndex 避免动画异常、为什么 zIndex 需要设置稳定的值以及在多种布局容器内使用 zIndex 等内容。

03

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

众所周知，SwiftUI 是一个响应式框架，这意味着，当数据源发生变化时，框架会自动更新视图。同样，当我们想调整视图显示时，应直接对状态进行修改。但是，SwiftUI 中的一些系统控件并没有完全遵循响应式的设计原则，由此在某些情况下会出现严重的错误，影响用户体验，并使开发者无所适从。

02

SwiftUI - 百行代码变十行，Swift再创辉煌

这种声明式的方式甚至允许使用复杂的功能，如动画（animation）。只需要几行代码，即可添加动画在任何控件上，并且可以使用易于调用的特效。在运行时，SwifthUI 会自行控制创建流畅动作的所有步骤，并且可以解决程序冲突，保证 app 稳定运行。动画特效变得如此容易，我们可以发掘使 app 更加灵动的方式。

03

在 SwiftUI 中用 Text 实现图文混排

SwiftUI 提供了强大的布局能力，不过这些布局操作都是在视图之间进行的。当我们想在 Text 中进行图文混排时，需要采用与视图布局不同的思路与操作方式。本文将首先介绍一些与 Text 有关的知识，并通过一个实际案例，为大家梳理出在 SwiftUI 中用 Text 实现图文混排的思路。

03

一段因 @State 注入机制所产生的“灵异代码”

本文将通过一段可复现的“灵异代码”，对 State 注入优化机制、模态视图（ Sheet、FullScreenCover ）内容的生成时机以及不同上下文（相互独立的视图树）之间的数据协调等问题进行探讨。

02

掌握 SwiftUI 的 Safe Area

Safe Area（安全区域）是指不与导航栏、标签栏、工具栏或其他视图控制器提供的视图重叠的内容空间。

03

从用SwiftUI搭建项目说起

后续这个SwiftUI分类的文章全部都是针对SwiftUI的日常学习和理解写的，自己利用Swift写的第二个项目也顺利上线后续的需求也不是特着急，最近正好有空就利用这段时间补一下自己对SwiftUI的理解，这个过程当中正好把整个学习过程记录下来，方便自己查阅，也希望能给需要的同学一点点的帮助。由于自己还欠着RxSwift的帐，这次也是想着先放弃别的账务（欠的的确挺多的）先全心全意的把这两块的帐给补补，希望补上这笔账之后自己对Swift的理解也能上一个台阶，对Siwft的理解自认为还是感觉欠缺的，不算是真的深入的掌握，我对SwiftUI也是在学习当中，现在能查阅的关于SwiftUI的资料很多是需要收费的，遇到问题只能想办法努力解决，有写的不钟意的地方，希望多加指正！

02

SwiftUI 布局协议 - Part 1

今年 SwiftUI 新增最好的功能之一必须是布局协议。它不但让我们参与到布局过程中，而且也给了我们一个很好的机会去更好的理解布局在 SwiftUI 中的作用。

01

SwiftUI 布局协议 - Part2

在 Part 1 我们探索了布局协议的基础知识，为理解布局是如何工作的打下了坚实的基础。现在，是时候深入研究那些更少提及的功能了，以及如何使用它们来为我们带来便利。

03

SwiftUI中的水平条形图

水平条形图以矩形条的形式呈现数据类别，其宽度与它们所代表的数值成正比。本文展示了如何在垂直条形图的基础上创建一个水平柱状图。

02

@StateObject 研究

在我之前的文章@State研究中我们探讨过@State，通过它，我们可以方便的将值类型数据作为View的Source of truth。在SwiftUI 1.0时代，如果想将引用类型作为source of truth,通常的方法是使用@EnvironmentObject或者 @ObservedObject。

04

掌握 ViewThatFits

在 iOS 16 中，SwiftUI 增加了一个新的自适应布局容器 ViewThatFits。正如其名称所示，它的作用是在给定的多个视图中找出最合适的视图并使用。对于大多数人来说，这是一个简单易用的容器。不过，本文打算对其进行彻底的剖析，包括规则细节、理想尺寸的含义、使用示例等。最后，我们将创建一个复刻版本的 ViewThatFits，以加深对其的认识和理解。

01

Swift 周报第十四期

本期是 Swift 编辑组自主整理周报的第五期，每个模块已初步成型。各位读者如果有好的提议，欢迎在文末留言。

01

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

我接触电脑的时间比较早（第一台电脑型号是 CP-80，CPU 是 MC6800 ），开始学习编程也比较早（从中华学习机开始，Apple II 的国内兼容机）。对于电脑和编程也都一直很有兴趣，不过从来也没有真正的把写代码当做过职业。虽然也使用过几种编程语言在不同的平台上写过些代码，但都不能算作完整的产品。习惯性地对信息行业的前沿动态以及一些新的技术方向保持着关注，但由于生意及其它方面的原因，从 10 几年前便完全没有再接触过编程了。

04

用 SwiftUI 实现 3D Scroll 效果

我们预览下今天要实现的 3D scroll 效果。学完本教程后，你就可以在你的 App 中把这种 3D 效果加入任何自定义的 SwiftUI 视图。下面我们来开始本教程的学习。

02

酷我音乐iOS小组件适配开发实践

本文来自TME腾讯音乐娱乐-酷我音乐团队,迈腾大队长投稿,本文仅作为个人学习记录使用,也欢迎在许可协议范围内转载或使用,请尊重版权并且保留原文链接,谢谢您的理解合作. 如果您觉得本文章对您能有帮助,您可以使用关注此公众号,感谢支持.

01

酷我音乐iOS小组件适配开发实践

本文来自TME腾讯音乐娱乐-酷我音乐团队,迈腾大队长投稿,本文仅作为个人学习记录使用,也欢迎在许可协议范围内转载或使用,请尊重版权并且保留原文链接,谢谢您的理解合作. 如果您觉得本文章对您能有帮助,您可以使用关注此公众号,感谢支持.

03

SwiftUI 布局：如何自定义 AlignmentGuides

SwiftUI 为我们提供了视图不同边缘的对齐指南（.leading、trailing、top等）以及.center和两个基线选项来帮助文本对齐。

01

SwiftUI 与 Core Data —— 数据定义

在上文中，我列举了一些在 SwiftUI 中使用 Core Data 所遇到的困惑及期许。在今后的文章中我们将尝试用新的思路来创建一个 SwiftUI + Core Data 的 app，看看能否避免并改善之前的一些问题。本文将首先探讨如何定义数据。

04

干货 | 关于SwiftUI，看这一篇就够了

梁启健，携程金融支付中心开发工程师，主要负责支付iOS端的开发与优化工作，喜欢研究大前端和跨平台技术。

01

如何结合 Core Data 和 SwiftUI

SwiftUI 和 Core Data 之间相差将近十年 —— SwiftUI 随着 iOS 13 面世而 Core Data 则是 iPhoneOS 3 的产物；很久以前，它还没有被称为 iOS，因为 iPad 尚未发布。尽管时间相距遥远，Apple 还是投入了大量工作以确保这两种强大的技术能够完美地相互配合使用，这意味着 Core Data 就像始终以这种方式设计一样，已集成到 SwiftUI 中。

03

在 SwiftUI 中创建一个环形 Slider

Slider 控件是一种允许用户从一系列值中选择一个值的 UI 控件。在 SwiftUI 中，它通常呈现为直线上的拇指选择器。有时将这种类型的选择器呈现为一个圆圈，拇指绕着圆周移动可能会更好。本文介绍如何在 SwiftUI 中定义一个环形的 Slider。

03

如何在 SwiftUI 视图中显示应用图标和版本

在应用中显示应用图标和版本是为用户提供快速识别应用版本和变体的好方法，无论是内部用户（如测试人员或利益相关者）还是外部用户。

02

【visionOS】从零开始创建第一个visionOS程序

visionOS是苹果Vision Pro的操作系统。将visionOS与熟悉的工具和技术一起使用，为空间计算构建沉浸式应用程序和游戏。

04

Swift 周报第十一期

本期是 Swift 编辑组自主整理周报的第二期，每个模块还在调整磨合期。各位读者如果有好的提议，欢迎在文末留言。

02

TCA - SwiftUI 的救星？(一)

打算用几篇文章介绍一下 TCA (The Composable Architecture[1])，这是一种看起来非常契合 SwiftUI 的架构方式。

03

SwiftUI 的动画机制

大多初学者都会在第一时间惊叹于 SwiftUI 轻松实现各种动画效果的能力，但经过一段时间的使用后，他们会发现 SwiftUI 的动画并非像表面上看起来那样容易驾驭。开发者经常需要面对：如何动、怎么动、什么能动、为什么不动、为什么这么动、如何不让它动等等困扰。对 SwiftUI 的动画处理逻辑了解的不够深入是造成上述困扰的主要原因。本文将尝试对 SwiftUI 的动画机制做以介绍，以帮助大家更好地学习、掌握 SwiftUI 的动画，制作出满意的交互效果。

04

SwiftUI 布局 —— 尺寸（下）

在上篇[3] 中，我们对 SwiftUI 布局过程中涉及的众多尺寸概念进行了说明。本篇中，我们将通过对视图修饰器 frame 和 offset 的仿制进一步加深对 SwiftUI 布局机制的理解，并通过一些示例展示在布局时需要注意的问题。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭