从每个按钮显示不同的视图

Question

初学SwiftUI，请见谅

我在 HStack 中有几个按钮。我希望每个按钮显示不同的视图。我的按钮代码如下所示：

HStack {
    Button(action: { showSheet.toggle() } ) {
        Image("one")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheet) {
        OneView(showSheet: $showSheet)
    }
    Button(action: { showSheet.toggle() } ) {
        Image("two")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheet) {
        TwoView(showSheet: $showSheet)
    }
    Button(action: { showSheet.toggle() } ) {
        Image("three")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheet) {
        ThreeView(showSheet: $showSheet)
    }
    Button(action: { showSheet.toggle() } ) {
        Image("four")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheet) {
        FourView(showSheet: $showSheet)
        }
}

我在顶层视图中也有这个：

@State private var showSheet = false

问题出在这里：无论我点击哪个按钮，它都显示 OneView。我还尝试在每个按钮视图中添加 .sheet... ，如下所示：

Button(action: { showSheet.toggle() } ) {
    Image("one")
        .resizable()
        .scaledToFit()
        .sheet(isPresented: $showSheet) {
                OneView(showSheet: $showSheet)
        }
}

但同样的行为发生了。我做错了什么？

Answer 1

如果你看

@State private var showSheet = false

和

.sheet(isPresented: $showSheet) { OneView(showSheet: $showSheet) }

以及任何按钮操作中的这个

showSheet.toggle()

这意味着当切换 showSheet 变量时，它将触发 .sheet 修饰符并呈现 OneView 的实例，这成为一个问题，因为 showSheet 变量只能触发一个 sheet 一次是您的 SwiftUI 代码中的第一个，因此您需要做的是使用不同的变量来处理不同的 sheet 演示文稿，如下所示：

@State private var showSheetOne = false
@State private var showSheetTwo = false
@State private var showSheetThree = false
@State private var showSheetFour = false

并且在每个 .sheet 修饰符上，您想要单独设置绑定并在其各自的按钮中切换每个绑定

HStack {
    Button(action: { showSheetOne.toggle() } ) {
        Image("one")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheetOne) {
        OneView(showSheet: $showSheetOne)
    }
    Button(action: { showSheetTwo.toggle() } ) {
        Image("two")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheetTwo) {
        TwoView(showSheet: $showSheetTwo)
    }
    Button(action: { showSheetThree.toggle() } ) {
        Image("three")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheetThree) {
        ThreeView(showSheet: $showSheetThree)
    }
    Button(action: { showSheetFour.toggle() } ) {
        Image("four")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheetFour) {
        FourView(showSheet: $showSheetFour)
    }
}

Answer 2

尝试为每个视图使用不同的变量名称。或者一个数组 :

@State private var showSheet = Array(repeating: false, count: 5)
//                                   [0, 0, 0, 0, 0]
//                                    ^ we want the array start from 1 
//                                    so we add 0 at the first.

使用：

HStack {
    Button(action: { showSheet[1].toggle() } ) {
        Image("one")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheet[1]) {
        OneView(showSheet: $showSheet[1)
    }
    Button(action: { showSheet[2].toggle() } ) {
        Image("two")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheet[2]) {
        TwoView(showSheet: $showSheet[2])
    }
    Button(action: { showSheet[3].toggle() } ) {
        Image("three")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheet[3]) {
        ThreeView(showSheet: $showSheet[3])
    }
    Button(action: { showSheet[4].toggle() } ) {
        Image("four")
            .resizable()
            .scaledToFit()
    }.sheet(isPresented: $showSheet[4]) {
        FourView(showSheet: $showSheet[4])
    }
}

从每个按钮显示不同的视图

Showing different views from each button

swiftui