前端学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的大佬们见笑了😂,如果有看到欢迎指点一下

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek