SwiftUI学习笔记

RGBullsEye实现（源自Ray教程）

使用SwiftUI实现颜色匹配的小游戏，使用到了SwiftUI的Color,Button,Slider等模块。

第一步：创建SwiftUI

创建新的SwiftUI工程，选择IOS下Single View App,然后在下一个界面中输入Product Name : RGBulls,点击Next,在需要位置创建工程。


进入到主界面
ContentView.swift为默认主文件
由于RGBulls为颜色辨别软件，最终完成界面如图

界面从上到下分为三个部分，颜色显示界面（包含左右两个部分），按键部分（当配色完成后提交结果），配色部分（三个slider），用于配色。
首先完成颜色显示界面中目标颜色显示，定义三个变量，用于目标颜色显示用 因为完成每次配色后，需要重新赋值目标颜色显示，所以定义时使用了@State，使用Color替换Text视图。

定义用于配色的RGB参数

修改Previews中以及SceneDelegate中对ContentView的调用参数。
左右显示
预览界面如图
为颜色界面添加文本视图，需要用到VStack

预览视图

为了加入Button，在最外层HStack外再嵌套一层VStack,然后加入button，如图

在Button下方加入3个Slider用于调整颜色
这个符号$,是SwiftUI中用于Binding，数据的变动会实时反应出来。此时预览图如下。

使用预览视图中实时预览Live Preview,滑动slider，则可实时观看颜色显示变化。

在变量定义后面，加入记分函数,用于Button按下后计算得分

按键按下后，使用Alert方式显示得分，所以需要引入布尔变了来触发Alert

当Button按下后，showAlert的值发生反转，并且由Button来实现.alert。当按下Cancel后，重新赋值目标配色视图。

实时预览如图

到这里基本功能已经完成。剩下的是对界面进行简单修饰。
修改slider模块，让界面更清晰
为slider添加文本以及增加Modifier
如图

预览视图

界面更加清晰。

因为使用了三个slider，可以首先制作一个slider的通用视图，以后直接调用该视图，就可以完成三种颜色的slider的配置，仅仅需要传递参数就可以了，实现复用。
command+鼠标单击Slider的HStack，选择Extract Subview,定义新的视图名字NewColorSlider
在新的视图中，定义所需要的变量

然后在原来Slider的位置，调用新视图,在居中对齐，如下

完成了。