项目布景

最近因为疫情空闲在家，在浏览网络信息的时分发现一款“电子木鱼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之后，苹果这一声明式语言最大的特点就是经过“描绘性语言”来“创立一个事物”。

上述的编程方法中，咱们类似于日常描绘一样，创立了一个图片和描绘这个图片：

  1. 添加一个来自资料库的图片；
  2. 这个图片太大超出鸿沟了，期望它的巨细是能够调整的；
  3. 调整后尺度变形了，期望它能保持本来的宽高比；
  4. 还是有点大/小，期望调整它最大是多大；

完结“木鱼”主体后，为了杰出木鱼本体，能够将整个页面布景设置为黑色，和上述方法共同，能够在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右侧的预览窗口测验点击木鱼看看作用，如下图所示：

iShot_2022-11-09_18.21.18.gif

项目小结

这是一款很风趣的App，玩法简单但不失乐趣，似乎间感受到自身被净化了。其实想了想，这款App之所以能够火起来，或许是现代打工人对自己的自嘲吧，经过发明一些没什么用的，来让这个国际更风趣一些。

以往的项目或许用的最多的是直接编程的形式，记住基本的控件的运用，记住这些控件能运用的修饰符，记住控件能运用的交互动画。似乎，作为一个程序员不老老实实写代码就不算程序员。

SwiftUI供给了一种新式的开发形式，这种声明式语法就好像咱们在“告诉”计算机，咱们要什么东西，以及它应该长成什么样。因而，这次的事例测验从SwiftUI自身出发，以“拖拽组件”的方法出现一种编程方法，期望大家也能有所收成。

别的，电子木鱼App还没有完善，下一章节，咱们将完结敲击时的声响以及更改敲击木鱼祈祷的内容，请保持期待吧。

版权声明

本文为稀土技术社区首发签约文章，14天内制止转载，14天后未获授权制止转载，侵权必究！