Skip to main content

18 posts tagged with "Swift"

View All Tags

上一节我们介绍了 SwiftUI 的列表(List)视图,ForEachIdentifiable协议。

这一节我们将详细介绍在 SwiftUI 中如何使用 NavigationView(iOS 16 前)和 NavigationStack(iOS 16 及更高版本) 来构建导航界面,同时探讨如何自定义导航栏的外观、返回按钮,以及使用 SwiftUI 提供的 toolbar 等高级用法。

在 iOS 应用开发中,导航界面是非常常见且重要的部分。无论是显示一系列数据还是管理不同的功能模块, 都少不了使用导航栏和导航视图来为用户提供分层次的浏览体验。 本文将详细介绍在 SwiftUI 中如何使用 NavigationView(iOS 16 前)和 NavigationStack(iOS 16 及更高版本) 来构建导航界面,同时探讨如何自定义导航栏的外观、返回按钮,以及使用 SwiftUI 提供的 toolbar 等高级用法。

鱼雪

上一节 我们介绍了 SwiftUI 中的动画和过渡效果,本节我们继续介绍 SwiftUI 中的列表视图。

在 UIKit 中, UITableView 是使用最为广泛的 UI 控件之一,常见于新闻类应用、社交应用等。 在 SwiftUI 出现之前,我们需要编写大量的代码和配置(比如自定义单元格、设置数据源等), 才能在 UITableView 中显示简单的列表。

如今,SwiftUI 中的 List 控件让这一切变得非常简单: 几行代码就可以快速实现一个动态列表,而且可以轻松自定义行布局。

本文将系统讲解如何使用 ListForEach 来展示简单或复杂的列表数据, 同时结合 Identifiable 协议来为每一个元素提供唯一标识。 我们还会深入介绍如何自定义列表分割线、背景以及在不同场景下灵活运用各种行布局。

鱼雪

上一节我们介绍了 SwiftUI 中的 PathShape 控件, 本节我们将介绍 SwiftUI 中的动画与过渡。

SwiftUI 的出现,让我们在进行动画开发时,可以像在 Keynote 中使用 “Magic Move” 一样简单。 Keynote 的 Magic Move 会自动分析幻灯片之间元素的变化并自动添加过渡效果; 而在 SwiftUI 中,你只需要定义视图的两个状态,SwiftUI 就能帮你完成从一个状态到另一个状态的动画过渡。

在这篇文章里,你将学习如何使用 SwiftUI 提供的 隐式动画显式动画 来为视图创建各种动画效果,以及如何在视图之间使用 Transitions(过渡)来实现插入与移除动画。

鱼雪

上一篇博客我们介绍了 SwiftUI 中的 @State@Binding 控件,

今天我们来介绍 SwiftUI 中的 PathShape 控件。

在iOS开发中,很多资深开发者都使用过Core Graphics来绘制自定义的图形和控件。 随着SwiftUI的兴起,Apple也为我们提供了强大的Path和Shape API, 可以用更简洁、更声明式的方式来绘制各种矢量图形。

在本教程中,你将学习如何使用SwiftUI的PathShape协议来绘制直线、弧线, 以及进阶的饼图与甜甜圈图表。

本教程主要涵盖:

  • 理解Path类型,并在SwiftUI中绘制线条与形状
  • 探索Shape协议,自定义绘制复杂形状
  • 使用Path.addArc绘制弧线、饼图
  • 创建基于Circle的进度指示器
  • 利用Circle().trim(from:to:)绘制甜甜圈图表

通过阅读本文并练习其中的示例,你将能够更灵活地利用SwiftUI中的绘制功能,实现个性化的UI控件与数据可视化组件。

鱼雪

上一篇博客我们介绍了 SwiftUI 中的 ScrollView 控件,

今天我们来介绍 SwiftUI 中的 Button 控件。

info

按钮是启动应用特定操作的核心控件,具有可自定义的背景,并可以包含标题或图标。系统提供了多种预定义按钮样式, 适用于大多数使用场景。同时,你也可以设计完全自定义的按钮。

按钮作为所有应用中基本的用户界面控件,负责处理用户的触摸操作并触发特定的动作。 对于熟悉 iOS 编程的开发者来说,SwiftUI 中的 Button 与 UIKit 中的 UIButton 有着显著的相似之处,但 SwiftUI 的 Button 提供了更大的灵活性和定制选项。

在本篇博客中,我们将深入探讨 SwiftUI 按钮的各种功能和自定义技巧,帮助你打造出色的应用界面。

鱼雪

上一篇博客我们介绍了 SwiftUI 中的 Button 控件,

今天我们来介绍 SwiftUI 中的 @State@Binding 控件。

在应用开发中,状态管理是每个开发者必须面对的关键问题。 让我们以开发一个音乐播放器应用为例。当用户点击播放按钮时,按钮应切换为停止按钮。 为了实现这一功能,你需要一个机制来跟踪应用的状态,以便在适当的时候改变按钮的外观。

SwiftUI 提供了多种内置的状态管理功能,其中之一就是 @State 属性包装器。 当你使用 @State 注解一个属性时,SwiftUI 会自动将其存储在应用中。 此外,使用该属性的视图会在其值发生变化时自动接收到通知。 因此,当状态发生变化时,SwiftUI 会重新计算受影响的视图并相应地更新应用的外观。

听起来是不是很棒?不过,我理解状态管理一开始可能有些让人困惑。 为了更好地理解状态(@State)绑定(@Binding), 本文将通过编码示例和练习来深入讲解这些概念。

通过这些示例,你将更好地掌握 SwiftUI 中这一关键概念。

鱼雪

SwiftUI 革新了开发者构建 iOS、macOS、watchOS 和 tvOS 用户界面的方式。

上一篇 SwiftUI 布局 介绍了 SwiftUI 中使用 VStackHStackZStack 进行布局。

今天我们介绍 SwiftUI 提供的强大组件之一是 ScrollView,它让创建可滚动内容变得轻而易举。 在本全面教程中,我们将深入了解 ScrollView,并指导您构建一个令人惊叹的轮播图界面。 通过本指南,您将拥有一个灵活且动态的 UI 组件,提升您 SwiftUI 应用的用户体验。

鱼雪

在你已经了解了SwiftUI的基础知识并掌握了如何显示文本内容后,现在是时候学习如何布局用户界面了。

上一篇 SwiftUI 图片视图 介绍了 SwiftUI 中使用 Image 显示图片。

今天我们介绍 SwiftUI 中使用 VStackHStackZStack 进行布局。

在本教程中,我们将深入探讨SwiftUI中的堆栈布局,包括VStackHStackZStack, 并展示如何通过这些堆栈构建复杂的网格布局。通过逐步构建一个简单的网格界面,你将学会如何有效地组合视图, 创建出理想的用户界面。

鱼雪