在SwiftUI中点击ZStack时,如何导航到另一个视图?

xtfmy6hx  于 2023-11-16  发布在  Swift
关注(0)|答案(1)|浏览(126)

我在SwiftUI中创建了一个应用程序,它显示一个正方形列表,每行包含2个单元格,每个单元格包含一个图像和文本。我所做的是每个单元格都是一个VStack(文本顶部的图像),然后包含在ZStack中(添加一个矩形,使其看起来像一个适当的单元格)。我想让ZStack可点击,点击时,导航到另一个视图。
这在UIKit(我已经使用了一段时间)中使用CollectionView非常容易,然后当每个单元格被选中时,只需将视图控制器推送到导航控制器。然而,由于我必须在SwiftUI中做这个项目,我不知道如何做到这一点。我已经尝试了NavigationViews和Navigation Links,但没有效果。
我的代码为细胞如下:

struct CellView: View {
    var image: String

    var body: some View {
        ZStack{
            VStack{
                Image(image).resizable().frame(width: 100, height: 100).scaledToFit()
                Text(image.capitalized).font(.system(size: 19, weight: Font.Weight.bold))
            }
            RoundedRectangle(cornerRadius: 20)
                .stroke(Color(red: 220/255, green: 9/255, blue: 73/255), lineWidth: 5.0).frame(width: 150, height: 150)
        }
    }

    init(image: String) {
        self.image = image
    }
}

struct RowView: View {

    var image1: String
    var image2: String

    var body: some View {
        HStack(alignment: .center, spacing: 20.0){
            CellView(image: image1)
            CellView(image: image2)
        }
    }

    init(image1: String, image2: String) {
        self.image1 = image1
        self.image2 = image2
    }
}

字符串
我试过使用NavigationViews和NavigationLinks,但都不起作用。

tcbh2hod

tcbh2hod1#

让它工作的一种方法是将每个单元格 Package 为NavigationStack内的NavigationLink
我不知道你的细节视图会是什么样子,但这里有一个虚拟的实现:

struct DetailView: View {
    let imageName: String
    var body: some View {
        Text(imageName)
    }
}

字符串
RowView内部,将每个CellView Package 为NavigationLink

// struct RowView

var body: some View {
    HStack(alignment: .center, spacing: 20.0) {
        NavigationLink {
            DetailView(imageName: image1)
        } label: {
            CellView(image: image1)
        }
        NavigationLink {
            DetailView(imageName: image2)
        } label: {
            CellView(image: image2)
        }
    }
}


最后,NavigationStack位于父视图中:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                RowView(image1: "cat", image2: "dog")
                RowView(image1: "horse", image2: "cow")
            }
        }
    }
}

相关问题