RGBullsEye实现(源自Ray教程)

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

第一步:创建SwiftUI

创建新的SwiftUI工程,选择IOSSingle View App,然后在下一个界面中输入Product Name : RGBulls,点击Next,在需要位置创建工程。
SwiftUI学习笔记SwiftUI学习笔记
SwiftUI学习笔记
进入到主界面
ContentView.swift为默认主文件
由于RGBulls为颜色辨别软件,最终完成界面如图
SwiftUI学习笔记
界面从上到下分为三个部分,颜色显示界面(包含左右两个部分),按键部分(当配色完成后提交结果),配色部分(三个slider),用于配色。
首先完成颜色显示界面中目标颜色显示,定义三个变量,用于目标颜色显示用SwiftUI学习笔记 因为完成每次配色后,需要重新赋值目标颜色显示,所以定义时使用了@State,使用Color替换Text视图。
SwiftUI学习笔记
定义用于配色的RGB参数
SwiftUI学习笔记
修改Previews中以及SceneDelegate中对ContentView的调用参数。SwiftUI学习笔记
左右显示SwiftUI学习笔记
预览界面如图SwiftUI学习笔记
为颜色界面添加文本视图,需要用到VStack
SwiftUI学习笔记
预览视图
SwiftUI学习笔记
为了加入Button,在最外层HStack外再嵌套一层VStack,然后加入button,如图
SwiftUI学习笔记
在Button下方加入3个Slider用于调整颜色SwiftUI学习笔记
这个符号$,是SwiftUI中用于Binding,数据的变动会实时反应出来。此时预览图如下。
SwiftUI学习笔记
使用预览视图中实时预览Live Preview,滑动slider,则可实时观看颜色显示变化。

在变量定义后面,加入记分函数,用于Button按下后计算得分
SwiftUI学习笔记
按键按下后,使用Alert方式显示得分,所以需要引入布尔变了来触发Alert
SwiftUI学习笔记
当Button按下后,showAlert的值发生反转,并且由Button来实现.alert。当按下Cancel后,重新赋值目标配色视图。
SwiftUI学习笔记
实时预览如图
SwiftUI学习笔记
到这里基本功能已经完成。剩下的是对界面进行简单修饰。
修改slider模块,让界面更清晰
为slider添加文本以及增加Modifier
如图
SwiftUI学习笔记
预览视图
SwiftUI学习笔记
界面更加清晰。

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

相关文章:

  • 2022-01-02
  • 2021-09-23
  • 2021-12-22
  • 2022-12-23
  • 2021-12-24
  • 2022-12-23
  • 2021-08-08
  • 2021-08-14
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-02-08
  • 2022-12-23
  • 2021-07-23
  • 2021-06-27
  • 2022-01-25
相关资源
相似解决方案