自学IOS开发第2天·学习基础SwiftUI
文章目录
- 学习基础SwiftUI
- 跟着官方文档创建一个项目
- 工程基本介绍
- 基本UI
- 构建简单视图
- 创建CircleImage
- 完成视图
- 课后习题
学习基础SwiftUI
我完全跟着SwiftUI官方教程和文档来学习的,官方教程和文档地址:
https://developer.apple.com/tutorials/swiftui
跟着官方文档创建一个项目
打开 Xcode 并在 Xcode 的启动窗口中点击 Create a new Xcode project
或者:File > New > Project 来新建项目
IOS > App > Next:
创建项目完成!
工程基本介绍
在左侧的目录中选择 BlogerApp.swift,看到如下代码:
import SwiftUI@main
struct BlogerApp: App {var body: some Scene {WindowGroup {ContentView()}}
}
使用 SwiftUI 应用程序生命周期的应用程序具有符合App协议的结构。该结构的body属性返回一个或多个场景,这些场景又提供显示内容。该@main属性标识应用程序的入口点。
在左侧的目录中选择:ContentView.swift,看到如下代码:
import SwiftUIstruct ContentView: View {var body: some View {Text("Hello, World!").padding()}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()}
}
默认情况下,SwiftUI 视图文件声明两个struct。第一个struct符合View协议并描述视图的内容和布局(3-8 line)。第二个struct声明该视图的预览(10-14 line)。
点击Resume显示布局的实时预览,如果此部分不存在,可以按照步骤: Editor > Canvas 来显示此部分模块
ps:可以在上侧选择指定的机型进行预览和运行
基本UI
接下来会用到View:Text()、Image()、Divider() 和容器 HStack()、VStack()
在右侧的预览中,按住Command后,单机 “Hello World” Text()这一View
出现以下弹框,点击 “Show SwiftUI Inspector”
在这里便可以调整Text的属性,在这里调整,左侧的代码也会实时变动。同样也可以在左侧直接编写View代码,预览也会实时改变。
构建简单视图
接下来构建一些简单的视图,这一部分结合着SwiftUI第一章教程来学习
SwiftUI第一章教程:https://developer.apple.com/tutorials/swiftui/creating-and-combining-views
HStack():横向堆栈容器
VStack():纵向堆栈容器
现在来构建下面的视图(这个不是列表,不是列表,不是列表):
创建CircleImage
右击左侧目录项目,NewFile,出现如下图:
选中 SwiftUI View,然后点击 Next
输入 CircleImage 后,点击 Create ,创建成功!
如下代码,用于显示圆形头像
//
// CircleImage.swift
// imrku
//
// Created by imrku on 2021/10/21.
//import SwiftUIstruct CircleImage: View {var res:Stringinit(res:String){self.res = res}var body: some View {//看这里,这里是主要的Image(res).resizable(resizingMode: .stretch).frame(width: 60, height: 60).clipShape(Circle()).shadow(radius: 2)}
}//预览
struct CircleImage_Previews: PreviewProvider {static var previews: some View {CircleImage(res: "face1")}
}
完成视图
之后回到ContentView,继续完成基本博主们的展示
//
// ContentView.swift
// imrku
//
// Created by imrku on 2021/10/21.
//import SwiftUIstruct ContentView: View {var body: some View {VStack(alignment: .center) {HStack(){CircleImage(res: "face1")VStack(){HStack(){Text("第三女神程忆难").font(.title2)Spacer()}HStack(){Text("立名程忆难,忆程序人生之难矣!").font(.subheadline).foregroundColor(Color.gray)Spacer()}.padding(.top ,-10.0)}Spacer()}.padding()Divider()//分割线HStack(){CircleImage(res: "face2")VStack(){HStack(){Text("梦想橡皮擦").font(.title2)Spacer()}HStack(){Text("为你在IT圈“打怪升级”提供辅助!").font(.subheadline).foregroundColor(Color.gray)Spacer()}.padding(.top ,-10.0)}Spacer()}.padding()Divider()//分割线HStack(){CircleImage(res: "face3")VStack(){HStack(){Text("1_bit").font(.title2)Spacer()}HStack(){Text("我就是一个热心的神奇海螺!").font(.subheadline).foregroundColor(Color.gray)Spacer()}.padding(.top ,-10.0)}Spacer()}.padding()Divider()//分割线HStack(){CircleImage(res: "face4")VStack(){HStack(){Text("TrueDei").font(.title2)Spacer()}HStack(){Text("不荒废现在,不畏惧未来!").font(.subheadline).foregroundColor(Color.gray)Spacer()}.padding(.top ,-10.0)}Spacer()}.padding()Divider()//分割线HStack(){CircleImage(res: "face5")VStack(){HStack(){Text("一头小山猪").font(.title2)Spacer()}HStack(){Text("若非一番寒彻骨,哪得梅花扑鼻香!").font(.subheadline).foregroundColor(Color.gray)Spacer()}.padding(.top ,-10.0)}Spacer()}.padding()Spacer()}.padding()}
}struct ContentView_Previews: PreviewProvider {static var previews: some View {Group {ContentView()}}
、
至此,基础UI完成,文中用到很多View属性,可以参考官方文档学习!再次贴出官方文档链接:
SwiftUI第一章教程:https://developer.apple.com/tutorials/swiftui/creating-and-combining-views
课后习题
自学IOS开发第2天·学习基础SwiftUI相关推荐
- 自学IOS开发第3天·基础SwiftUI之动态滑动列表(上)
文章目录 基础SwiftUI之动态滑动列表 UI构建 创建模型 BlogerData.swift 创建 JSON文件 创建 Model.swift 附稿 基础SwiftUI之动态滑动列表 我完全跟着S ...
- iOS开发60分钟入门学习精华
有过脚本开发经验的人(如Javascript,PHP,Shell)在刚开始学习iOS开发的时候,会觉得iOS开发的学习曲线比脚本语言要高,是的,这种感觉是对的.因为学iOS开发,不仅是学习一门新语言, ...
- iOS资源帖-优秀博客、iOS开发技术文、学习网站
原链接:https://www.jianshu.com/p/619c61d9c8fb 一些博客 王巍 Objc中国发起人.Line工程师 ibireme YYKit作者 bang JSPatch作者 ...
- (转)Limboy:自学 iOS 开发的一些经验
不知不觉作为 iOS 开发也有两年多的时间了,记得当初看到 OC 的语法时,愣是被吓了回去,隔了好久才重新耐下心去啃一啃.啃了一阵,觉得大概有了点概念,看到 Cocoa 那么多的 Class,又懵了, ...
- 自学 iOS 开发的一些经验 - 转自无网不剩的博客
不知不觉作为 iOS 开发也有两年多的时间了,记得当初看到 OC 的语法时,愣是被吓了回去,隔了好久才重新耐下心去啃一啃.啃了一阵,觉得大概有了点概念,看到 Cocoa 那么多的 Class,又懵了, ...
- Limboy:自学 iOS 开发的一些经验
转自:http://www.cocoachina.com/ios/20150104/10823.html 不知不觉作为 iOS 开发也有两年多的时间了,记得当初看到 OC 的语法时,愣是被吓了回去,隔 ...
- 自学 iOS 开发的一些经验(一些很好的链接)
不知不觉作为 iOS 开发也有两年多的时间了,记得当初看到 OC 的语法时,愣是被吓了回去,隔了好久才重新耐下心去啃一啃.啃了一阵,觉得大概有了点概念,看到 Cocoa 那么多的 Class,又懵了, ...
- iOS之一个iOS开发人员完整的学习路线
iOS开发能力 掌握(最好是精通)OC语言和runtime各种细节(读过相关的clang源码和runtime源码为佳).精通基本的framework(Foundation,UIKit等,平时干活用得最 ...
- iOS开发--一些开源的学习资源
vim插件: https://github.com/Valloric/YouCompleteMe vim插件配置: https://github.com/spf13/spf13-vim ------- ...
最新文章
- Linux 有关管理进程的命令小结
- java中如果写设置密码,在java中编写一个多字母换位密码[关闭]
- NHibernate实例化类部分属性
- SpringBoot在项目中基本配置设置
- Excel里,vlookup函数各种应用-匹配多列、多条件匹配
- Excel宏的自动运行设置
- 解决IE6、IE7、IE8、Firefox兼容的两种方案
- Python: Django和Flask关于解析request的参数请求
- iqooneo系统要不要更新_手机系统要不要升级?别纠结,1分钟看完你就知道
- 有哪些好用的论文检索网站?
- 请你预想一下量子计算机未来,直播,研究量子计算机的我被曝光了
- java 夏令时_Java里面的夏令时
- Arduino使用火焰传感器
- 5.MySQL高级语句,你给我学!
- 市场调研报告-全球与中国数字钥匙模块市场现状及未来发展趋势
- 开源协同办公软件多人在线编辑office 地址:http://www.dzzoffice.com/
- 技术干货 | 人大金仓KFS基于分区索引的分片入库技术解析
- 设备未连接_电气设备安装工程常见定额解释!不要错过
- 免费工具iFRPFILE All in One 2.7.1免费工具
- 足球俱乐部介绍——拜仁慕尼黑