基础了解·创建第一个SwiftUI项目

简介: 基础了解·创建第一个SwiftUI项目

基础了解·创建第一个SwiftUI项目


在App Store安装Xcode开发工具的编程环境后,我们来创建第一个SwiftUI项目,帮助我们快速入门SwiftUI声明式语言。

创建SwiftUI项目

初次打开Xcode开发工具时,Xcode开发工具会打开下面的弹窗:

image.png

这是Xcode开发工具提供给开发者快速创建和打开历史项目的引导弹窗,我们可以做以下四件事情:

  1. Create a new Xcode project:创建一个新的Xcode项目
  2. Clone an existing project:克隆一个现有的项目
  3. Open a project or file:打开一个项目或者文件
  4. 右侧边栏:快速打开历史项目

当在引导弹窗取消勾选后,往后再打开Xcode开发工具将不再展示引导弹窗。如果想要创建做相关的操作,就需要在Mac顶部菜单栏选择File > New > Project

回归正题,我们需要创建一个新的SwiftUI项目,选择Creat a new Xcode project,将会出现以下弹窗:

image.png

Xcode开发工具提供Apple全生态平台应用开发环境,可以开发iOS手机端或平板端应用、macOS桌面版应用、watchOS手表端应用等。

选择iOS栏目下的APP,点击Next,将会出现以下弹窗:

image.png

  • Product Name:项目的名称,建议使用具有一定标识的名称,示例:SwiftUIDemo
  • Team:团队名称,可以设置为“公司”或“个人组织”
  • Organization Identifier:组织标识符,该应用程序的唯一标识符
  • Bundle Identifier:反向域名,由系统自动生成,组织标识符+项目名称
  • Interface:用户界面,使用的编程方式,需要选择SwiftUI
  • Language:编程语言,需要选择Swift

另外,Use Core Date 询问是否使用iOS的数据存储,可以按需勾选,勾选后Xcode开发工具将会自动创建数据存储有关的代码文件,供开发者调用。Include Tests 询问是否集成单元测试,后续若需要单元测试,也可以自行创建,这里也无需勾选。

输入Product Name后,点击Next,将会出现以下弹窗:

image.png

选择SwiftUI项目保存的路径,最后点击 Create,第一个 SwiftUI APP 就创建完成了,创建完的 SwiftUI APP 里有默认实现的示例代码。

image.png

Xcode简要说明

Xcode是一款功能全面的应用程序,通过此工具可以轻松输入、编译、调试并执行iOS应用程序。纵观Xcode开发工具布局,主要的用户界面可以分为以下几个部分:

image.png

  • 顶部工具栏:用于运行和暂停模拟器,以及切换机型设备
  • 视图工具栏:包含所有App视图文件、设计元素文件夹、测试文件等
  • 编辑区域:编辑你的代码,如不需要预览,可开启两个编辑页面进行编程
  • 预览区域:实时预览代码修改后的结果
  • 调试面板:断点调试或者方法调试后,输出结果
  • 检查器面板:用于检查页面元素和提供辅助信息

预览SwiftUI APP

创建好SwiftUI项目后,Xcode会默认实现一段示例代码,我们可以直接在实时预览窗口中查看内容,也可以在打开模拟器或者连接真机运行SwiftUI APP

在右侧Preview中,点击实时预览窗口中的Resume,载入模拟器结束后,可以看到项目效果:

image.png

切换预览机型

在工具栏上,允许切换不同iOS机型,以便于查看SwiftUI项目内容在不同机型下的效果,示例:

image.png

运行SwiftUI APP

除了在预览窗口实时查看修改的内容,因为部分iOS动画无法在预览窗口进行渲染,因此有时我们也会使用到iOS模拟器或者真机进行预览。

点击“运行”按钮,启动iOS模拟器:

image.png

运行后,实时预览窗口停止,Xcode开发工具将会打开一个仿真iOS模拟器,如下:

image.png

快速上手

下面我们来快速上手,录入下面的代码,我们来了解下SwiftUI的神奇之处,如下代码所示:

scss

复制代码

struct ContentView: View {
    var body: some View {
        VStack {
            Text("SwiftUI项目实战")
                .font(.largeTitle)
                .foregroundColor(.blue)
                .padding()
            Text("文如秋雨")
                .font(.title)
                .foregroundColor(.gray)
                .padding()
        }
    }
}

上述代码中,我们创建了2个Text文本,分别展示不同文字,并通过VStack纵向布局容器包裹在内。文字部分使用font字体修饰符和foregroundColor字体颜色修饰符,以及边距修饰符padding修饰。

在实时预览窗口可以看到我们最终实现的效果,如下图所示:

image.png

恭喜你,跨出了SwiftUI编程的第一步!

本章小结

在本章中,我们简要介绍了Xcode的各项功能的使用,以及创建完成了第一个SwiftUI项目,即便它很简单。

但就实际开发而言,本章的步骤是创建每一个项目必备的操作,其中有很多小细节可能很多开发者都没怎么注意到。

编程可能对于很多人来说是一件很枯燥的事情,但只要我们走好每一步,写好每一行、每一段、每一页代码,最终总会成为我们理想中的大佬,望共勉~

相关文章
|
数据安全/隐私保护
【鸿蒙软件开发】文本输入(TextInput/TextArea)
【鸿蒙软件开发】文本输入(TextInput/TextArea)
1691 0
|
SQL 流计算
对于Flink CDC,当源表的数据被删除后,可以通过以下方法在结果表中同步删除
对于Flink CDC,当源表的数据被删除后,可以通过以下方法在结果表中同步删除
1663 1
|
1月前
|
IDE 开发工具 Swift
Xcode 26.4 (17E192) 发布 - Apple 平台 IDE
Xcode 26.4 (17E192) 发布 - Apple 平台 IDE
495 1
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
1273 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
9月前
|
算法 搜索推荐 Java
collections.shuffle
`Collections.shuffle()` 是 Java 中用于随机打乱列表顺序的静态方法,基于 Fisher-Yates 算法实现,支持使用默认或自定义随机数生成器,适用于抽奖、游戏、随机抽样等场景,且会直接修改原列表。
348 0
|
7月前
|
Java 数据库 Android开发
基于Android的电子记账本系统
本项目研究开发一款基于Java与Android平台的开源电子记账系统,采用SQLite数据库和Gradle工具,实现高效、安全、便捷的个人财务管理,顺应数字化转型趋势。
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
1187 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
9月前
|
编解码 算法 数据安全/隐私保护
手机常用压缩工具推荐,RAR,ZIP,7Z解压缩,zip解压缩,Bandizip,ZArchiver等解压工具
在手机上解压RAR、ZIP、7Z等格式文件时,选择一款功能强大的解压缩工具至关重要。本文介绍了多款实用的解压软件,如7Z解压缩、ZArchiver、RAR、Bandizip等,它们不仅支持多种压缩格式的解压和压缩,还具备文件管理、加密、分享、媒体预览等功能。无论是处理文档、图片还是视频,这些工具都能提供高效便捷的解决方案,满足日常使用需求。
3504 0
|
iOS开发
IOS编译出现Command PhaseScriptExecution failed with a nonzero exit code
IOS编译出现Command PhaseScriptExecution failed with a nonzero exit code
3756 2
|
前端开发
vue3 使用 mock 模拟服务器接口
vue3 使用 mock 模拟服务器接口
417 1

热门文章

最新文章