SwiftUI 初体验 1 基础功能的使用

最新推荐文章于 2024-11-13 17:23:01 发布

>>> Eugene >>>

最新推荐文章于 2024-11-13 17:23:01 发布

阅读量529

点赞数

分类专栏： SwiftUI 文章标签： SwiftUI

本文链接：https://blog.youkuaiyun.com/qq_28323373/article/details/101601993

版权

本文介绍了如何开始使用SwiftUI，包括在macOS Catalina上安装和设置，通过创建SingleViewApplication项目体验SwiftUI的基础功能。在Xcode 11中，我们学习了如何使用Text类进行文本编辑，预览面板的Inspector进行可视化编辑，Stacks的使用，以及将UIKit控件融入SwiftUI。此外，还展示了如何创建自定义的UIViewRepresentable以展示网页内容，并利用.offset和.padding方法调整布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SwiftUI的使用需要更新Xcode11，而SwiftUI的预览功能需要安装一系列的component，这些component需要在macOS catalina才能正常使用。那么catalina正式发布之前，我们必须加入测试计划才能提早获得macOS的新版本。
在搜索引擎找macOSPublicBetaAccessUtility，你会知道怎么下载最新版的系统版本。

更新完工具后，创建勾选了SwiftUI的SingleViewApplication项目，打开默认的ContentView文件，在右侧工具栏打开预览（快捷键opt+cmd+return），面板的右上角点resume启动预览。
工程默认显示基础架构，包含helloworld文本，我们可以简单修改Text类了解控件的基本操作用法：

struct ContentView: View {
   
    var body: some View {
   
        Text("Hello Eugene,\nLet's begin explore SwiftUI,\nnow we change the Text's attibutes")
            .font(.body)
            .fontWeight(.medium)
            .foregroundColor(Color.blue)
    }
}

Text类的属性修改api会把self返回，我们可以直接在后面连缀更多的属性编辑语句。在预览区的控件上按cmd+左键，可以看到Inspector面板，我们可以用可视化的方式编辑我们的代码，并实时更新到我们的代码中。
inspector1
inspector2
同样的面板可以在代码区Text类cmd+左键唤醒。
inspector3
Stacks，一个其他语言很常见的对象在SwiftUI出现了。它可以在界面的横向和纵向为内容提供容器，并管理它们的排列。在代码区或者预览区cmd+leftmouse选择embed in stack可以自动嵌套stack块。

struct ContentView: View {
   
    var body: some View {
   
        VStack {
   
            HStack {
   
                Text("Hello Eugene,\nLet's begin explore SwiftUI,\nnow we change the Text's attibutes")
                    .font(.body)
                    .fontWeight(.medium)
                    .foregroundColor(Color.blue)

最低0.47元/天解锁文章