ios - 如何在 swiftUI 中使图像可点击？

Question

import SwiftUI

struct ContentView: View {

@State private var isActive : Bool = false

var body: some View {
    VStack {
        Image("home-img")
        .resizable()
        .aspectRatio(contentMode:.fill)
        .edgesIgnoringSafeArea(.top)
        .edgesIgnoringSafeArea(.bottom)
        .overlay(Image("round")
                 .resizable()
                 .frame(width: 350, height: 350 , alignment: .center)
            .overlay(Image("girl-img")
                .resizable()
                .frame(width: 150, height: 150, alignment: .center)
            )
            .overlay(Image("video")
                .resizable()
                .frame(width: 100, height: 100)
                .offset(y: -200)
                .padding(.bottom, -70)
            ).onTapGesture(count: 1) {
                NavigationView {
                    NavigationLink(destination: SelecteImageView(), isActive: self.$isActive) {
                        Text("")
                    }
                }
            }
        }
      }
    }

我想要做的是，当我点击 Image("Video") 时，它应该使用 NavigationView 将我重定向到一个新屏幕。通常，使用按钮，它会重定向到一个新屏幕，但这里的问题是图像处于叠加状态。提前谢谢你。

Answer 1

您需要将 ImageView 放在 NavigationLink label 中。navigationLink 的作用类似于 Button，它采用蓝色的默认按钮样式。因此，使用波纹管修饰符将默认按钮样式更改为普通样式:

import SwiftUI

struct ContentView: View {

@State private var isActive : Bool = false

var body: some View {
    NavigationView {
        NavigationLink(destination: SelecteImageView(), isActive: self.$isActive) {
            VStack {
                Image("home-img") //.renderingMode(.original)
                    .resizable()
                    .aspectRatio(contentMode:.fill)
                    .edgesIgnoringSafeArea(.top)
                    .edgesIgnoringSafeArea(.bottom)
                    .clipped() //Here shows your Image only inside the frame
                    .overlay(Image("round") //.renderingMode(.original)
                        .resizable()
                        .frame(width: 350, height: 350 , alignment: .center))
                    .overlay(Image("girl-img") //.renderingMode(.original)
                        .resizable()
                        .frame(width: 150, height: 150, alignment: .center)
                )
                    .overlay(Image("video") //.renderingMode(.original)
                        .resizable()
                        .frame(width: 100, height: 100)
                        .offset(y: -200)
                        .padding(.bottom, -70)
                )
            }
        }.buttonStyle(PlainButtonStyle())
    }
  }
}

或者，如果您只使用图像，您可以为 ImageView 提供 .renderingMode(.original) 修饰符，并从上面删除 .buttonStyle(PlainButtonStyle())代码。