Step‑by‑Step SwiftUI Tutorial: Building a Digital Woodfish App

During the pandemic the author discovered a viral "Electronic Woodfish" app that lets users tap a virtual wooden fish to earn points, prompting a reflection on digital transformation of Buddhist practices and a personal desire to create a similar tutorial.

After a light‑hearted laugh, the author feels a lingering sentiment about the experience.

Recalling childhood wishes to become a monk and lead a simple life, the author contrasts that with modern work pressures and wonders about personal fulfillment.

Motivated by the intriguing woodfish case, the author decides to produce a step‑by‑step tutorial as a form of stress relief.

Project analysis : The core features of the Electronic Woodfish app include a tappable wooden fish that plays a sound, displays a "功德+1" (merit +1) label, and updates a counter at the top; the app also supports custom tip texts such as "开心+1" or "财富+1".

Project preparation : Create a new SwiftUI project named DigitalWoodfish and add a woodfish image asset (preferably with a transparent background) to the Assets catalog.

Drag the imported woodfish image into ContentView.swift using the visual library.

Because the image may exceed screen bounds, apply modifiers: .resizable() , .aspectRatio(contentMode: .fit) , and .frame(maxWidth: 180, maxHeight: 180) to keep the picture sized correctly.

SwiftUI’s declarative syntax lets you describe UI elements rather than write imperative code, as shown by the image component definition.

Steps to adjust the image: Add the woodfish image from the asset library. Make the image resizable. Preserve its aspect ratio. Set a maximum frame size.

Set the page background to black by wrapping the content in a ZStack and adding Color(.black) as the bottom layer.

Apply .edgesIgnoringSafeArea(.all) to the color view so the black background fills the entire screen.

To show a navigation title, embed the ZStack inside a NavigationStack (or NavigationView for iOS 15 and earlier) and add the .navigationTitle(...) modifier.

Because the black background hides a default black title, set the preferred color scheme to dark mode with .preferredColorScheme(.dark) , which automatically switches the title color to white.

Declare state variables for the dynamic title: @State var gameType: String = "功德值" @State var totalNumber: Int = 10086 Then compose the navigation title as .navigationTitle(gameType + ":" + String(totalNumber)) .

For the tip text that appears after each tap, add a Text view with the placeholder "功德值+1". Text("功德值+1")

Introduce a state variable for the increment amount: @State var number: Int = 1 Update the tip text to use the variables: Text(gameType + "+" + String(number))

Add an .onTapGesture to the woodfish image that increments the total count: .onTapGesture { totalNumber += number }

Explain that totalNumber += number is equivalent to totalNumber = totalNumber + number .

Implement a click animation by declaring a Boolean state isTap and applying a scale effect: @State var isTap: Bool = false Show the tip text only when isTap is true: if isTap { Text(gameType + "+" + String(number)) } Add the scaling modifier to the image: .scaleEffect(isTap ? 0.99 : 1.0)

Toggle isTap on tap and automatically revert after 0.1 seconds: if !isTap { self.isTap.toggle() DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { self.isTap.toggle() } } This creates a brief shrink animation and shows the tip text briefly.

Project summary : The app is simple yet enjoyable, offering a playful way for busy workers to mock‑self‑relief. It demonstrates that modern iOS development can go beyond writing raw code by leveraging SwiftUI’s drag‑and‑drop style and declarative modifiers.

SwiftUI provides a new development paradigm where you describe what you want, and the framework renders it, allowing developers to focus on UI composition rather than low‑level implementation.

Future chapters will add sound effects and customizable prayer texts to enrich the experience.

Copyright statement : This article is an original piece for the Juejin technical community; redistribution is prohibited for 14 days and thereafter without permission.