SwiftUI是Apple退出的新一代UI开发模式,是一个函数式,声明式的开发环境。也就是说,想Flutter一样,Swift UI 中的 Text, List等等,实际上并不是真实的UI组件而只是UI的描述。作为代价,我们很难从这些描述上获取组件的实际渲染尺寸。但是,组件渲染的细节也有SwiftUI负责,我们无需关注。像UITableview中复杂的协议,就不用我们来实现了。根据现在的形式来看,这是当前开发的一个趋势。
新建App


这里要注意,SwiftUI对XCode和系统的版本号有限制, 如果发现没有SwiftUI,请升级MacOS版本号,并升级最新XCode
查看App的代码
工程新建完成之后,可以看到三个文件:

我们可以看到,新建的App中有三个文件。在IOS12之前,初始化是放在AppDelegate之中的, IOS13之后则在SceneDelegate之中。

在 SceneDelegate 的生命周期中配置ContentView:

如果需要修改引入的页面,就在这里修改
ContentView
SwiftUI最实用的部分就在这里了,我们可以直接预览UI,而且无论在代码里还是在预览上修改UI,都可以实时的展示在页面上。

按住command键,点击预览上的组件,可以看到控件可以配置的属性,点击之后修改可以直接体现在代码上。


ContentView的代码结构

我们可以看到 ContentView 继承自View,我们来看下 SwiftUI中View到底是什么:

View是一个带有无数扩展的协议, 其本身要求一个实现本协议的body。在工程中,我们就提供了 Text("Hello World")作为body,因此
var body :(some View)等同于UIView的addSubview,在这里写入SwiftUI的组件。
PreviewProvider也是一个协议,它用来实现右侧的预览,在preview中,我们可以提供对ContentView的预览
网友评论