前端学SwiftUI第1篇:入口逐行分析

SwiftUI官方文档

一、前置条件

  • 下载xcode
  • 创建一个app项目,创建完长这样的

二、目录结构

这里我创建的一个名字叫HelloWorld的项目

css 复制代码
HelloWorldApp.swift 入口文件,可以理解成main.js
ContentView.swift   可以理解成 App.vue
Assets.xcassets     放图片静态资源的,类似vue里的assets文件夹

另外两个测试的文件夹我们就先不管了

三、HelloWorldApp.swift 入口文件main.js

swift 复制代码
import SwiftUI

@main 
struct HelloWorldApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
  • import SwiftUI:不引入Swift编译器没有办法理解你下面写的内容是什么。
  • @main: 标记告诉编译器 HelloWorldApp 是您的应用程序的入口点,从而使得 SwiftUI 应用程序能够正确初始化并运行。
  • struct 是声明结构体的关键字
  • App是一个协议,用于定义应用程序的行为以及配置应用程序的外观和行为,应该也可以理解成类似TS里面的类型
  • var body 类似于html中的body标签
  • some Scene 是一个不透明类型的表示。它被用于表示应用程序的场景,通常在应用程序的入口点中用作返回类型。
  • WindowGroup 是一种用于表示应用程序窗口的 container 类型。它用于创建应用程序的主窗口,并指定该窗口的内容。通常情况下,您可以将应用程序的根视图作为 WindowGroup 的内容。
  • ContentView 可以理解成隐式引入了一个组件,swift这里有点奇怪不需要引入就直接用了,这个其实就是调用了ContentView.swift里的组件。

四、ContentView.swift 入口布局文件-App.vue

swift 复制代码
import SwiftUI

struct ContentView: View { // 这个就是入口文件调用过的
    var body: some View { //理解成html的body标签
        VStack {  //理解成html标签,VStack是从上往下,HStack是从左往右
            Image(systemName: "globe") //这个图标不知道哪里来的,感觉是UI里有自带的图标
                .imageScale(.large)
                .foregroundStyle(.tint)
            mage("man") //这是我自己加的代码,向Assets.xcassets拖了一个图片进去
                .resizable()
                .frame(width: 60, height: 60) //指定大小
            Text("Hello, world!")  //文本
        }
        .padding() //这里是padding是0的意思
    }
}

//这个东西比较特殊,前端肯定没有见过,它是加了之后右边才会有预览的功能
#Preview {
    ContentView()
}

感谢🙏阅读,ios的大佬们见笑了😂,如果有看到欢迎指点一下

相关推荐
我要洋人死16 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人28 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人28 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR33 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香35 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969338 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai44 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#