全文共2274字，预计学习时长14分钟
图源：unsplash
很多人翘首以盼的SwiftUI 2.0在WWDC 2020中诞生了。不出所料，苹果在主题演讲结束时对SwiftUI进行了一些全新的API更新，这些新改进本质上是附加的，没有任何违背或更改会破坏旧的13个SwiftUI代码库。
本文就将带你一览iOS14新发布的SwiftUI控件。你需要一个Xcode 12 beta（最低要求macOS版本为10.15.4）来运行新的SwiftUI控件。让我们开始吧！
新的SwiftUI应用程序起点
截至目前，我们必须使用AppDelegates和SceneDelegates设置第一个SwiftUI视图。Swift 5.3引入了一个基于类型的程序入口点，可以使用@main属性进行设置，而最新的SwiftUI迭代则巧妙地利用了这一点。
Xcode 12新项目
SwiftUI现在提供了在应用程序启动时调用的以下结构：
@mainstruct WhatsNewiOS14SwiftUIApp：App{var body：some Scene{WindowGroup {ContentView（）}}}
WindowGroup是其中的一个场景属性，我们可以定义起始视图层次结构。在WindowGroup计算属性内设置TabView、NavigationViews或者App Clip。
SwiftUI：LazyVStack和LazyHStack
以前，SwiftUI视图用于立即加载，这导致在填充大量数据时会出现性能和内存问题。在SwiftUI的第一次迭代中，NavigationLink的目的地视图也用于预先加载内容。
这一次，苹果推出了新的惰性水平堆栈视图和垂直堆栈视图，它将在你需要时加载内容，有助于SwiftUI的性能优化。现在SwiftUI列表中也引入了延迟加载。
来看这个实际运行的SwiftUI LazyHStack的示例：
struct ContentView：view{var body：some View {ScrollView（.horizontal）{LazyHStack（spacing：10) {ForEach（0 .. <1000）{indexinText（“ \（index）”）.frame（width：100，height：200).border（Color.gray.opacity（0.5），width：0.5).background（Color.blue）.cornerRadius（6）}}.padding（.leading，10）}}}
SwiftUI滚动视图位置
由于功能有限，第一个版本的Swift UI在ScrollView前端受到了很大的影响。iOS 14的SwiftUI提供了急需的ScrollViewReader和ScrollViewProxy来捕获滚动视图的偏移位置，并通过程序对其进行移动。
我们可以将视图嵌入到ScrollViewReader中，并按以下任一方式使用scrollTo方法：
scrollView.scrollTo（viewId）
// or
scrollView.scrollTo（viewId，anchor：.center）
默认情况下，滚动视图的位置设置为视图的顶部，可使用anchor属性来完善它。例如，在下面的代码中，将anchor属性设置为居中时，滚动位置看起来比设置为leading时要好得多。
Swift UI ProgressView
以前，我们必须利用Swift UI Shapes来复制线性ProgressView和UIViewRepresentable，以便在SwiftUI中创建ActivityIndicator。现在，在iOS 14的SwiftUI中，ProgressView具有本机支持功能。
默认的ProgressView（）会创建一个不确定的UIActivityIndicator（类似于进度加载器），而下面的代码在Swift UI中创建一个线性的ProgressView：
ProgressView（“ Text”，value：10，total：100)
使用progress View Style进一步自定义Progress View，progress View Style接受内置的Circular Progress ViewStyle和Default Progress ViewStyle，还可以创建自定义修饰符。
Accent Color用于在Progress View中设置文本颜色，而foreground Color则用作设置色调。
Swift UI Labels,Links, and Color Pickers
图源：unsplash
在最新的SwiftUI迭代中，Labels是急需被添加的。他们允许你使用以下代码在文本旁边设置图标：
Label（“ SwiftUI 2.0”，systemImage：“ checkmark.icloud”）
在图标属性内，可以设置SF符号，图像资产或自定义SwiftUI形状。
SwiftUI Link是另一个很酷的UI控件，它为导航到URL提供了内置支持：
Link("Click me",destination:URL(string: "your_url")!)
如果是通用链接，则该链接将重定向到网络浏览器或者关联的应用程序。
SwiftUI工具库的另一个重要功能是包含了一个原生的ColorPickerUI控件。你可以使用状态属性包装器来更新用户选择的颜色。
ColorPicker("Sample Picker",selection: $myColor)
SwiftUI TextEditor，MapKit，Sign In With Apple
上次被省略的多行可滚动UITextViews现在原生包含在SwiftUI中，被称为TextEditor。
TextEditor（text：$ stateProperty）
MapKit必须通过包装在UIViewRepresentable中嵌入到SwiftUI中，现在已被本地添加。我们可以直接从SwiftUI的视图界面本身传递MKCoordinateRegion，显示用户位置以及其他内容：
Map（mapRect：interactionModes：showsUserLocation：userTrackingMode：
现在，SignInWithAppleButton已进入SwiftUI的内置控件中。要设置按钮，只需实例化结构并将标签参数设置为.signUp或.signIn即可指示授权类型。
新的onChange修饰符用于侦听状态更改
onChange是一个新的视图修改器，可在所有SwiftUI视图中使用。它使你可以侦听状态的更改并相应地对视图执行操作。例如，由于附加了onChanged修饰符，可以切换Button状态更改并触发TextEditor清除，如下所示：
importSwiftUIstruct ContentView：view{@State varcurrentText：String =“Hi How are you？”@State var clearText：Bool = falsevar body：some View {VStack {TextEditor（text：$ currentText）.onChange（of：clearText）{value inif clearText { currentText =“”}}Button（action：{clearText = true}，label：{Text（“Clear TextEditor”）})}}}
注意，实例化SwiftUI的主体时，clearText状态属性会自动触发onChange修饰符。
SwiftUI TabView为页面控件带来新风格
图源：unsplash
UIPageViewController功能是在上次加入SwiftUI的。在iOS 14迭代中，TabView引入了一种新样式，可让你在SwiftUI视图中嵌入可滑动页面控件。只需在.tabViewStyle（）修饰符中设置PageTabViewStyle（），如下所示：
importSwiftUIstruct ContentView：view{let colors: [Color] = [.red, .green,.yellow, .blue]var body：some View {TabView {ForEach（0 .. <6）{ index inText("Tab \(index)").font（.title）.frame（maxWidth：.infinity，maxHeight：.infinity）.background（colors [colors[index％colors.count]）.cornerRadius（8）}} .tabViewStyle（PageTabViewStyle（））}}
这是在Xcode 12上使用的代码屏幕截图：
SwiftUI网格
iOS 14 SwiftUI中再次略过了CollectionView和Compositional Layouts，但这并不能阻止Apple为基于网格的布局引入新的容器，它让你可以在LazyHGrid或LazyVGrid中设置子视图。
SwiftUI网格的每个元素都是一个GridItem。可以设置GridItem的对齐方式，间距和大小。在以下代码中，在SwiftUI中创建了垂直网格布局，该布局由三列组成：
struct ContentView：view{let colors: [Color] = [.red, .green,.yellow, .blue]var columns: [GridItem] =Array(repeating: .init(.flexible(), alignment: .center), count:3)var body：some View {ScrollView {LazyVGrid(columns: columns, spacing: 10) {ForEach（0 ... 100，id：\ .self）{index inText("Tab \(index)").frame（width：110, height: 200).background（colors [colors[index％colors.count]）.cornerRadius（8）}}}}}
仅用几行代码就为iOS 14在SwiftUI中构建了可自定义的网格布局！
SwiftUI的更新给了我们很多惊喜：SwiftUI的OutlineGroups和VideoPlayer是很有前景的新功能，SwiftUI 视图构建器现在也能支持if let和switch语句了。除此之外，还有更多值得期待的地方需要你去慢慢探索。
一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”
（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）