一、前置条件
- 下载xcode
- 创建一个app项目,创建完长这样的
二、目录结构
这里我创建的一个名字叫HelloWorld的项目
HelloWorldApp.swift 入口文件,可以理解成main.js
ContentView.swift 可以理解成 App.vue
Assets.xcassets 放图片静态资源的,类似vue里的assets文件夹
另外两个测试的文件夹我们就先不管了
三、HelloWorldApp.swift 入口文件main.js
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
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的大佬们见笑了😂,如果有看到欢迎指点一下