Question

HStack {
                VStack {
                    NavigationLink(destination: Convos()) {
                        Text("Go to Convos")
                    }
                    ZStack {
                        Circle()
                            .fill(Color.white)
                            .frame(width: 55, height: 55, alignment: .center)
                            .shadow(color: .gray, radius: 1.5, y: 3)
                        Image(systemName: "map").resizable().frame(width: 30, height: 30).foregroundColor(Color("purple"))
                    }
                }
}

我需要在该圆圈上方有一个带有地图的按钮，该按钮会将我带到另一个视图，即Convos（）。我已经尝试添加NavigationView和Button，但是不确定是否编写了正确的语法。有其他方法可以做到这一点吗？而不是像从普通的List / NavigationLink那样从右侧进入视图，有没有办法使View从左侧或底部进入/选择？谢谢

Answer 1

唯一要做的就是将代码包装在NavigationView中：

struct ExampleView: View {
    var body: some View {
        NavigationView {
            // your code snippet from above
        }
    }
}

对于自定义过渡，我认为现在NavigationView仅支持默认的从右侧滑动幻灯片。

如果要使用全页视图，则可以尝试使用

struct ExampleView: View {
    @State private var showingConvos = false

    var body: some View {
        ZStack {
            HStack {
                VStack {
                    Button(action: {
                        self.showingConvos.toggle()
                    }) {
                        Text("Go to Convos")
                    }
                    ZStack {
                        Circle()
                            .fill(Color.white)
                            .frame(width: 55, height: 55, alignment: .center)
                            .shadow(color: .gray, radius: 1.5, y: 3)
                        Image(systemName: "map").resizable().frame(width: 30, height: 30).foregroundColor(Color("purple"))
                    }
                }
            }

            // Convos view will appear when showingConvos == true
            if showingConvos {
                Convos(showingConvos: $showingConvos)
                    // customize the transition and animation to suit your preference
                    .transition(.move(edge: .bottom))
                    .animation(.easeIn)
            }
        }
    }
}

您的Convos视图将需要绑定，以便您将其关闭：

    struct Convos: View {
    @Binding var showingConvos: Bool

    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.gray)
                .edgesIgnoringSafeArea(.all)

            // Example back button
            Button(action: {
                self.showingConvos.toggle()
            }) {
                Text("Back")
            }
        }
    }
}

在这种情况下，如何使NavigationLink工作？我可以在其中添加按钮吗？

1 个答案: