有多个按钮的视图,可进入各自的转发视图。

问题描述 投票:0回答:1

我有几个垂直堆叠的两对矩形(Rectangle()),每一个都有一个 Button. 当用户点击按钮时,需要将用户转发到特定的 View. 例如,如果他们点了Alice,用户需要被转发到AliceView。

enter image description here

如果只是一个按钮的问题,将用户从当前的 View 到另一个不是问题。 总之,以下是我的情况。

import SwiftUI

struct ContentView: View {
    @State var canAlice: Bool = false
    @State var canKim: Bool = false

    var body: some View {
        NavigationView {
            List {
                HStack(spacing: 0) {
                    // ZStack: A view that overlays its children, aligning them in both axes.
                    ZStack {
                        Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
                            .foregroundColor(.orange)
                            .border(Color.yellow, width: 2)
                        Button(action: {
                            self.canAlice = true
                        }, label: {
                            Text("Alice")
                            .font(.largeTitle)
                            .background(Color.black)
                            .foregroundColor(.white)
                        })
                        NavigationLink(destination: AliceView(), isActive: $canAlice) { EmptyView() }
                    }
                    ZStack {
                        Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
                            .foregroundColor(.orange)
                            .border(Color.yellow, width: 2)
                        Button(action: {
                            self.canKim = true
                        }, label: {
                            Text("Kim")
                                .font(.largeTitle)
                                .background(Color.black)
                                .foregroundColor(.white)
                        })
                        NavigationLink(destination: KimView(), isActive: $canKim) { EmptyView() }
                    }
                }.listRowInsets(EdgeInsets())

                HStack(spacing: 0) {
                    ...
                    ...
                    ...
                }.listRowInsets(EdgeInsets())

                HStack(spacing: 0) {
                    ...
                    ...
                    ...
                }.listRowInsets(EdgeInsets())

                HStack(spacing: 0) {
                    ...
                    ...
                    ...
                }.listRowInsets(EdgeInsets())
            }
            .edgesIgnoringSafeArea(.all)
            .statusBar(hidden: true)
        }
    }
}

现在,如果我点击Alice按钮,当前的 View 过渡到AliceView,回到当前的 View 然后过渡到KimView。 如何在一个 View 并将用户转发到各自的 Views? 我是SwiftUI的新手。 谢谢。

更新

import SwiftUI

struct ContentView: View {
    @State private var selection: Int? = 0

    var body: some View {
        NavigationView {
            List {
                HStack(spacing: 0) {
                    // ZStack: A view that overlays its children, aligning them in both axes.
                    ZStack {
                        Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
                            .foregroundColor(.orange)
                            .border(Color.yellow, width: 2)
                        Button(action: {
                            self.selection = 1
                        }, label: {
                            Text("Alice")
                                .font(.largeTitle)
                                .background(Color.black)
                                .foregroundColor(.white)
                        })
                        NavigationLink(destination: AliceView(), tag: 1, selection: self.$selection) { EmptyView() }
                    }
                    ZStack {
                        Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
                            .foregroundColor(.orange)
                            .border(Color.yellow, width: 2)
                        Button(action: {
                            self.selection = 2
                        }, label: {
                            Text("Kim")
                                .font(.largeTitle)
                                .background(Color.black)
                                .foregroundColor(.white)
                        })
                        NavigationLink(destination: KimView(), tag: 2, selection: self.$selection) { EmptyView() }
                    }
                }.listRowInsets(EdgeInsets())

                HStack(spacing: 0) {
                    ...
                    ...
                    ...
                }.listRowInsets(EdgeInsets())

                HStack(spacing: 0) {
                    ...
                    ...
                    ...
                }.listRowInsets(EdgeInsets())

                HStack(spacing: 0) {
                    ...
                    ...
                    ...
                }.listRowInsets(EdgeInsets())
            }
            .edgesIgnoringSafeArea(.all)
            .statusBar(hidden: true)
        }
    }
}

现在,当我点击Alice或Kim时,我不会过渡到另一个视图,然后弹回初始视图。 无论我点击Alice还是Kim,我都会过渡到AliceView。

ios button swiftui
1个回答
0
投票

这里有一个解决方案(通过评论中提到的方法)。用Xcode 11.4 iOS 13.4测试。

enter image description here

隐藏链接的按钮样式。

struct LinkButtonStyle<D: View>: ButtonStyle {
    let destination: D
    @Binding var isActive: Bool

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(NavigationLink(destination: self.destination, isActive: $isActive) { EmptyView() })
    }
}

和一个修改单元格的例子

ZStack {
    Rectangle().frame(width: UIScreen.screenWidth / 2.0, height: UIScreen.screenWidth / 2.0, alignment: .topLeading)
        .foregroundColor(.orange)
        .border(Color.yellow, width: 2)
    Button(action: {
        self.canAlice = true
    }, label: {
        Text("Alice")
        .font(.largeTitle)
        .background(Color.black)
        .foregroundColor(.white)
    }).buttonStyle(LinkButtonStyle(destination: AliceView(), isActive: $canAlice))
}

0
投票

您可以使用单个 Bool 对于 isActice 参数和单个 NavigationLink. 还需要在 body. 并在按钮动作中设置目的地。下面是一个例子。

struct ContentView: View {

    @State var showNextView = false
    var destination = GeorgeView()

    var body: some View {
        NavigationView {
            List {
                HStack(spacing: 0) {
                    NavigationLink(destination: destination, isActive: $showNextView) { EmptyView() }
                    // Rest of your implementation...
                        Button(action: {
                            self.destination = KimView()
                            self.showNextView = true
                        }, label: {
                            Text("Kim")
                            .font(.largeTitle)
                            .background(Color.black)
                            .foregroundColor(.white)
                        })
                }
            }
        }
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.