SwiftUI实现点击一张图片修改另一张图片透明度的方法

开发SwiftUI视图时需要实现两个需求：

1. 点击第一张图片时，将第二张图片的透明度设置为0.0
2. 点击第二张图片时，既能切换自身透明度，又能跳转到指定视图

当前代码仅能在点击第二张图片时切换其透明度，且无法跳转。现有代码如下：

struct LycéesRow: View {
    var lycée: Lycée

    @State private var isTouched = false

    var body: some View {
        ZStack(alignment: .topLeading) {
            let firstImage = lycée.image
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 365, height: 280)
            .clipped()
            .cornerRadius(15)
            .offset(y: -35)

            firstImage

            RoundedRectangle(cornerRadius: 15)
            .frame(width: 365, height: 280)
            .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 15))
            .offset(y: -35)


            let secondImage = lycée.image
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 355, height: 200)
            .clipped()
            .cornerRadius(15)
            .offset(x: 5)
            .offset(y: 39.8)
            .opacity(isTouched ? 0.0 : 1.0)
            .onTapGesture {
                isTouched.toggle()
            }

            secondImage

            VStack(alignment: .leading, spacing: 1) {
                Text(lycée.département + ", France")
                .font(.system(size: 15, weight: .medium, design: .default))
                .foregroundColor(.white)
                .opacity(0.5)

                Text(lycée.nom)
                .font(.system(size: 25, weight: .bold, design: .serif))
                .foregroundColor(.white)

                Text(lycée.ville)
                .font(.system(size: 14, weight: .medium, design: .default))
                .foregroundColor(.white)
                .opacity(0.9)
            }
            .offset(y: -30)
            .offset(x: 12)
        }
    }
}

修改核心点 #

• 给第一张图片添加onTapGesture，直接将isTouched设为true（满足点击第一张隐藏第二张的需求）
• 第二张图片结合NavigationLink实现「切换透明度+跳转」的双重逻辑，避免手势冲突
• 添加状态变量控制跳转触发

修改后完整代码 #

import SwiftUI

struct LycéesRow: View {
    var lycée: Lycée
    @State private var showTargetView = false
    @State private var isTouched = false

    var body: some View {
        ZStack(alignment: .topLeading) {
            // 第一张图片：点击后直接隐藏第二张
            lycée.image
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 365, height: 280)
                .clipped()
                .cornerRadius(15)
                .offset(y: -35)
                .onTapGesture {
                    isTouched = true
                }

            RoundedRectangle(cornerRadius: 15)
                .frame(width: 365, height: 280)
                .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 15))
                .offset(y: -35)

            // 第二张图片：点击切换透明度+跳转指定视图
            NavigationLink(isActive: $showTargetView) {
                // 替换成你需要跳转的目标视图，例如 LycéeDetailView(lycée: lycée)
                Text("目标视图")
            } label: {
                lycée.image
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 355, height: 200)
                    .clipped()
                    .cornerRadius(15)
                    .offset(x: 5, y: 39.8)
                    .opacity(isTouched ? 0.0 : 1.0)
            }
            .onTapGesture {
                isTouched.toggle()
                showTargetView = true
            }

            VStack(alignment: .leading, spacing: 1) {
                Text(lycée.département + ", France")
                    .font(.system(size: 15, weight: .medium, design: .default))
                    .foregroundColor(.white)
                    .opacity(0.5)

                Text(lycée.nom)
                    .font(.system(size: 25, weight: .bold, design: .serif))
                    .foregroundColor(.white)

                Text(lycée.ville)
                    .font(.system(size: 14, weight: .medium, design: .default))
                    .foregroundColor(.white)
                    .opacity(0.9)
            }
            .offset(y: -30, x: 12)
        }
    }
}

// 示例模型，根据实际项目调整
struct Lycée: Identifiable {
    let id = UUID()
    let nom: String
    let ville: String
    let département: String
    let image: Image
}

额外说明 #

1. 若使用弹窗形式跳转，可将NavigationLink替换为Button+.sheet(isPresented: $showTargetView)的组合
2. 确保该视图的父视图包裹在NavigationStack（iOS16+）或NavigationView（iOS15及以下）中，否则NavigationLink无法生效
3. 若不需要切换透明度，仅点击第一张隐藏第二张，保留第一张的isTouched = true逻辑即可

内容的提问来源于stack exchange，提问作者kwiky