SwiftUI是Apple退出的新一代UI开发模式,是一个函数式,声明式的开发环境。也就是说,想Flutter一样,Swift UI 中的 Text, List等等,实际上并不是真实的UI组件而只是UI的描述。作为代价,我们很难从这些描述上获取组件的实际渲染尺寸。但是,组件渲染的细节也有SwiftUI负责,我们无需关注。像UITableview中复杂的协议,就不用我们来实现了。根据现在的形式来看,这是当前开发的一个趋势。
新建App
![](https://img.haomeiwen.com/i2413806/372fdb17ae0b0d80.png)
![](https://img.haomeiwen.com/i2413806/b4cf6e562de62467.png)
这里要注意,SwiftUI对XCode和系统的版本号有限制, 如果发现没有SwiftUI,请升级MacOS版本号,并升级最新XCode
查看App的代码
工程新建完成之后,可以看到三个文件:
![](https://img.haomeiwen.com/i2413806/3d80f6d2af09c24b.png)
我们可以看到,新建的App中有三个文件。在IOS12之前,初始化是放在AppDelegate之中的, IOS13之后则在SceneDelegate之中。
![](https://img.haomeiwen.com/i2413806/8dc6730329e1931b.png)
在 SceneDelegate 的生命周期中配置ContentView:
![](https://img.haomeiwen.com/i2413806/5789d22d54f983a6.png)
如果需要修改引入的页面,就在这里修改
ContentView
SwiftUI最实用的部分就在这里了,我们可以直接预览UI,而且无论在代码里还是在预览上修改UI,都可以实时的展示在页面上。
![](https://img.haomeiwen.com/i2413806/fec0d9e005db2568.png)
按住command键,点击预览上的组件,可以看到控件可以配置的属性,点击之后修改可以直接体现在代码上。
![](https://img.haomeiwen.com/i2413806/0fd09df61a1e6f18.png)
![](https://img.haomeiwen.com/i2413806/d0cc2a500f1ab414.png)
ContentView的代码结构
![](https://img.haomeiwen.com/i2413806/4eaa04808050927b.png)
我们可以看到 ContentView 继承自View,我们来看下 SwiftUI中View到底是什么:
![](https://img.haomeiwen.com/i2413806/2e28135a55ccabce.png)
View是一个带有无数扩展的协议, 其本身要求一个实现本协议的body。在工程中,我们就提供了 Text("Hello World")作为body,因此
var body :(some View)等同于UIView的addSubview,在这里写入SwiftUI的组件。
PreviewProvider也是一个协议,它用来实现右侧的预览,在preview中,我们可以提供对ContentView的预览
网友评论