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

您需要将图像视图放入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)
                    .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())
    }
  }
}

或者，如果您仅使用图像，则可以赋予图像视图.renderingMode(.original)修饰符，然后从上述代码中删除.buttonStyle(PlainButtonStyle())。

Answer 2

请在此处添加点击手势

    struct Contentview: View {
    @State var isNavigate :Bool = false
    var body: some View {
        NavigationView{
            VStack{
                NavigationLink(destination: LoginView()) {
                    Image("Birthday")
                    .resizable()
                    .aspectRatio(contentMode:.fill)
                    .edgesIgnoringSafeArea(.top)
                    .edgesIgnoringSafeArea(.bottom)
                        .frame(width: 200, height: 200 , alignment: .center)
                    .overlay(Image("round")
                             .resizable()
                             .frame(width: 350, height: 350 , alignment: .center)
                        )
                        .overlay(Image("girl-img")
                            .resizable()
                            .frame(width: 150, height: 150, alignment: .center)
                        )
                }
            }
        }
    }
}

如何在swiftUI中使图片可点击？

2 个答案: