项目布景
最近因为疫情空闲在家，在浏览网络信息的时分发现一款“电子木鱼App”悄然爆红网络。无需购买实体的木鱼，只需求下载App，经过不断点击App按钮，即可完结“自我救赎”，乃至还有不同的敲击声响能够挑选。在饶有兴趣地查阅相关文章后，不仅觉得“有点意思”，莫非这是释教在做数字化转型？
一笑而过后，当静下来却心里有些慨叹。
想起儿时也曾想遁入空门不理世事，做一个和尚追求心中的崇奉，过简单朴素的日子。而现在在社会营生，敷衍复杂人性，每天拖着疲惫的身体经常深夜回家，这真的是我想要的吗？
慨叹之后，想想“电子木鱼”这个事例也挺有意思，不如也测验做下教程，也算是一种另类的解压。
项目剖析
首要咱们来先行剖析“电子木鱼”App的功能点，如下图所示：
电子木鱼主要功能点为点击木鱼本体宣布敲击声响，每逢敲击一下，在界面大将出现“积德行善+1”的字样，且顶部计算敲击的次数。再深入些，咱们还能够支持自定义提示文字，比方“开心+1”、“财富+1”等等提示文字。
全体项目莫非不大，下面咱们来一步一步完结它。
项目预备
首要创立一个新的SwiftUI项目，命名为DigitalWoodfish。如下图所示：
在ContentView文件中，挑选模拟器预览示例代码作用，如下图所示：
然后，咱们需求导入一张“木鱼”的图片作为项目的资料，在Assets文件中，咱们拖入一张网络上下载的木鱼图片。
为了更好的出现作用，建议下载的图片布景色彩为通明，因为笔者运用的是iphone，在新版的iOS中能够提取图片中的元素出来，很简单就取得了一张没有布景色彩的图片，能够运用此办法取得项目资料。
资料整理好后，拖入到Assets文件中，如下图所示：
回到ContentView文件中，咱们开端搭建UI样式部分。
敲击主体：电子木鱼
第一步，咱们先搭建木鱼的主体展现部分，能够运用Image图片组件，先删除示例代码中VStack中的代码，然后在顶部工具栏右上角挑选“+”按钮，在Library中，点击Media栏目，能够看到在Assets导入的所有资料。
点击woodfish资料，拖动到VStack代码中，如下图所示：
拖入完结后，咱们就得到了带有woodfish资料的Image组件代码，如下图所示：
因为导入的图片尺度等原因，资料超出了屏幕鸿沟范围，这时分需求对Image图片进行修饰，依旧是点击顶部工具栏右上角“+”按钮，在Library挑选Modifiers修饰符栏目，找到Image的修饰符，挑选Image Resizable图片可调整巨细修饰符，如下图所示：
将Image Resizable图片可调整巨细修饰符加到Image图片上，如此，修饰符便可作用到控件上，如下图所示：
同理为了确保图片尺度不变形，还需求拖入Aspect Ratio调整长宽比修饰符，设置为fit自适应。最终运用Frame尺度框架修饰符调整其巨细。如此，便得到了一个木鱼主体视图。如下代码所示：
Image("woodfish")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 180, maxHeight: 180)
大家或许注意到了一点，和之前直接运用代码编程的方法不同，本章运用的方法更类似于UI规划方法。是的，在推出SwiftUI之后，苹果这一声明式语言最大的特点就是经过“描绘性语言”来“创立一个事物”。
上述的编程方法中，咱们类似于日常描绘一样，创立了一个图片和描绘这个图片：
- 添加一个来自资料库的图片；
- 这个图片太大超出鸿沟了，期望它的巨细是能够调整的；
- 调整后尺度变形了，期望它能保持本来的宽高比；
- 还是有点大/小，期望调整它最大是多大；
完结“木鱼”主体后，为了杰出木鱼本体，能够将整个页面布景设置为黑色，和上述方法共同，能够在Library拖入Views栏目中的Depth Stack仓库视图，并将上述的代码剪切到里边，代码如下：
ZStack {
VStack {
Image("woodfish")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 180, maxHeight: 180)
}
.padding()
}
布景色彩部分，能够在Library的Views栏目拖入Color色彩，拖入到ZStack仓库视图中，并设置色彩值为.black黑色。如下图所示：
因为视图安全区域的原因，咱们能够看到App页面上下都留有一片白色的区域。这时为Color色彩设置修饰符，让其疏忽安全区域。
在Library的Modifiers修饰符栏目中挑选Edges Ignoring Safe Area疏忽安全区域，将该修饰符加到Color上，如下代码所示：
ZStack {
Color(.black)
.edgesIgnoringSafeArea(.all)
VStack {
Image("woodfish")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 180, maxHeight: 180)
}
.padding()
}
标题文字：积德行善值 10086
完结木鱼主体内容后，咱们给这个视图加个标题。在Library的Modifiers修饰符栏目中挑选Navigation Title导航标题，将其加到VStack纵向视图中，如下图所示：
咱们看到并没有出现想要的导航栏标题，这是因为咱们并没有创立导航栏视图，导致在主体视图上添加的修饰符无效。
要是用Navigation相关的修饰符，需求做在全体视图外层包裹一层NavigationView导航视图，在Library的Views栏目中拖入Navigation Stack导航仓库视图，并把ZStack仓库视图的内容剪切在里边，如下图所示：
特别说明：Navigation Stack导航仓库视图是SwiftUI在2022年推出在iOS16版别新增的特性，如果是低版别的设备或许会出现不适用的状况，能够运用NavigationView代替。
完结后咱们发现还是看不到导航标题的内容，这是因为全体布景因为Color色彩和ZStack仓库视图将界面色彩填充为黑色，而Navigation Title导航标题文字色彩为默以为黑色，导致色彩不行见。
这时，能够运用修饰符栏目中的Preferred Color Scheme首选配色计划，将首选配色设置为夜间形式，如此SwiftUI将会将标题由本来的黑色主动转为白色，如下代码所示：
NavigationStack{
ZStack {
Color(.black)
.edgesIgnoringSafeArea(.all)
VStack {
Image("woodfish")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(maxWidth: 180, maxHeight: 180)
}
.padding()
.navigationTitle("Title")
.preferredColorScheme(.dark)
}
}
标题的文字部分，需求展现积德行善总数，并在每次敲击的时分添加总数。除了根底的“积德行善数”之外，还能够设置“静心值”、“开心值”等，因而标题部分需求动态设置文本值。
声明2个参数作为标题的内容，如下代码所示：
@State var gameType:String = "积德行善值"
@State var totalNumber:Int = 10086
上述代码中，gameType为虔诚求取的内容，类型为String字符串类型，示例：积德行善值。totalNumber为总数，统计敲击的次数，因为需求每次 敲击的时分进行累加，因而设置为Int数值类型，示例：10086。
声明参数后，设置Navigation Title导航标题文字内容为声明的变量的组合，如下代码所示：
.navigationTitle(gameType+"："+String(totalNumber))
因为totalNumber总数为Int类型，而Navigation Title导航标题文字内容需求为String字符串类型的文字，因而在运用字符串拼接的时分，需求将Int类型转换为String类型，SwiftUI能够直接运用类型包裹进行类型转换。
提示文字：积德行善值+1
下面咱们来完结敲击动作，每逢咱们敲击/点击木鱼的时分，木鱼会显现提示文字，示例：积德行善值+1。
咱们能够先创立文字部分，在Library的Views栏目中拖入Text文字控件，设置文字内容为“积德行善值+1”，如下代码所示：
Text("积德行善值+1")
提示文字部分，依据文字结构能够拆分为求拜的内容（与gameType保持共同），和敲击时添加的数量。求拜的内容能够直接运用gameType参数，咱们还需求声明每次添加的值的参数，如下代码所示：
@State var number:Int = 1
声明好参数，需调整Text组件展现的文字的内容，如下代码所示：
Text(gameType+"+"+String(number))
交互动画：敲击木鱼
下面来完结敲击木鱼的交互动作，当咱们点击木鱼视图时，Navigation Title导航标题文字的“积德行善值”总数会添加，咱们能够给木鱼主体视图添加一个点击动作。
在Library的Modifiers修饰符栏目中挑选On Tap Gesture点击手势修饰符，将它加到Image控件上。当每次点击时，让totalNumber总积德行善值加上每次点击的number的值，如下代码所示：
.onTapGesture {
totalNumber += number
}
其中，totalNumber += number相当于totalNumber = totalNumber+number。
如此，在每次点击木鱼的时分，积德行善值总数都会添加。
接下来，咱们给木鱼点击添加交互动作。电子木鱼点击时，每次点击木鱼都会有一个收缩的动画带来点击作用，且提示文字为每次点击时才出现，然后消失。这都给用户发明一种点击的反馈，而动画正是SwiftUI优秀之处。
关于上述的交互动作，咱们能够运用Bool运算逻辑，完结敲击木鱼的时分木鱼缩小，缩小后再康复原状。亦敲击木鱼的时分提示文字出现，然后消失。
首要声明一个Bool类型的变量，如下代码所示：
@State var isTap:Bool = false
然后给Text文字加一个if判别，当isTap为true，即木鱼被点击时才展现Text提示文字，如下代码所示：
if isTap {
Text(gameType+"+"+String(number))
}
然后给木鱼Image图片添加缩放的修饰符，在Library的Modifiers修饰符栏目中挑选Scale Effect缩放修饰符，添加到Image控件的Frame修饰符之后，如下代码所示：
.scaleEffect(isTap ? 0.99 : 1.0)
Scale Effect缩放修饰符依据isTap的状况，展现缩放比例，因为isTap默认状况为false，因而当isTap为ture时Scale Effect缩放比例为0.99，为false时则默以为1.0。判别条件逻辑说明如下：
参数 ? 为ture时的状况 : 为false时的状况
最终，咱们需求在点击木鱼的时分修正isTap的状况，但修正后还需求主动康复本来的状况。因而咱们能够在切换isTap状况的同时，在主线程执行一个相反的逻辑，以到达康复的作用，如下代码所示：
if !isTap {
self.isTap.toggle()
DispatchQueue.main.asyncAfter(deadline: .now()+0.1) {
self.isTap.toggle()
}
}
上述代码中，咱们给木鱼Image图片控件点击时间中添加了一个逻辑：当isTap没有被点击的时分，切换isTap的状况，标明，木鱼被点击，木鱼被点击切换isTap状况后，在主线程等候0.1秒后，主动切换isTap状况，康复到木鱼未敲击时的状况。
项目作用预览
在Xcode右侧的预览窗口测验点击木鱼看看作用，如下图所示：
项目小结
这是一款很风趣的App，玩法简单但不失乐趣，似乎间感受到自身被净化了。其实想了想，这款App之所以能够火起来，或许是现代打工人对自己的自嘲吧，经过发明一些没什么用的，来让这个国际更风趣一些。
以往的项目或许用的最多的是直接编程的形式，记住基本的控件的运用，记住这些控件能运用的修饰符，记住控件能运用的交互动画。似乎，作为一个程序员不老老实实写代码就不算程序员。
SwiftUI供给了一种新式的开发形式，这种声明式语法就好像咱们在“告诉”计算机，咱们要什么东西，以及它应该长成什么样。因而，这次的事例测验从SwiftUI自身出发，以“拖拽组件”的方法出现一种编程方法，期望大家也能有所收成。
别的，电子木鱼App还没有完善，下一章节，咱们将完结敲击时的声响以及更改敲击木鱼祈祷的内容，请保持期待吧。
版权声明
本文为稀土技术社区首发签约文章，14天内制止转载，14天后未获授权制止转载，侵权必究！
