【问题标题】:Only Display one view at a time so the user can toggle between the views一次只显示一个视图,以便用户可以在视图之间切换
【发布时间】:2020-06-09 17:57:51
【问题描述】:

问题:

我有 3 个单独的视图,我一次显示所有视图,但我只希望一次显示一个视图,以便用户可以在三个视图之间切换。这就是现在正在发生的事情。

下面的代码很长,但是如果您将代码复制并粘贴到 Xcode 中,您可以看到现在发生了什么。我有三个具有不同大小框架的视图。您可以单击每个视图按钮,它将打开该视图。

import SwiftUI

struct ContentView: View {
    @State var show1 = false
    @State var show2 = false
    @State var show3 = false

    var body: some View {
                ZStack {
                          NavigationView {
                            VStack {
                                Section {
                                    Color(red: 0.88, green: 0.88, blue: 0.88)
                                    .frame(maxWidth: .infinity, maxHeight: .infinity).edgesIgnoringSafeArea(.all)
                                 HStack {

                                    Button(action: {
                                        withAnimation(.spring())
                                        {
                                            self.show1.toggle()
                                        }
                                    }) {
                                        Text("View1")
                                            .font(.headline)
                                            .fontWeight(.regular)
                                            .lineLimit(nil)
                                            .padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 15))
                                        .foregroundColor(show1 ? .blue : .gray)
                                    }.foregroundColor(show1 ? .blue : .gray)
                                    .padding()


                                    Button(action: {
                                        withAnimation(.spring())
                                        {
                                    self.show2.toggle()
                                    }
                                    }) {
                                            Text("View2")
                                            .font(.headline)
                                            .fontWeight(.regular)
                                            .lineLimit(nil)
                                            .padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 15))
                                        .foregroundColor(show2 ? .blue : .gray)

                                    }.foregroundColor(show2 ? .blue : .gray)
                                    .padding()


                                    Button(action: {
                                          withAnimation(.spring())
                                          {
                                      self.show3.toggle()
                                      }
                                      }) {
                                        Text("View3")
                                            .font(.headline)
                                            .fontWeight(.regular)
                                            .lineLimit(nil)
                                            .padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 10))
                                        .foregroundColor(show3 ? .blue : .gray)

                                    }.foregroundColor(show3 ? .blue : .gray)
                                .padding()
                                    }}}
                    }
                            VStack (alignment: .center) {
                    if self.show1 {
                        ShowView1().transition(
                            AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
                            }
                            }

                    VStack (alignment: .center) {
                            if self.show2 {
                                 ShowView2().transition(
                                    AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
                            }
                    }

                    VStack (alignment: .center) {
                            if self.show3 {
                                 ShowView3().transition(
                                    AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
                            }
                    }}}}


struct ShowView1: View {
    var body: some View {
        ZStack() {
            Color.white
                .frame(maxWidth: .infinity, maxHeight: 52)
            }

        }
    }

struct ShowView2: View {
    var body: some View {
        ZStack() {
            Color.white
                .frame(maxWidth: .infinity, maxHeight: 600)

            }
        }
    }

struct ShowView3: View {
     var body: some View {
         ZStack() {
             Color.white
                 .frame(maxWidth: .infinity, maxHeight: 300)
             }
         }
     }

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

【问题讨论】:

    标签: xcode button toggle swiftui frame


    【解决方案1】:

    您实际上不是切换而是切换每个视图,因此具有共存的视图。这是更正的部分代码(仅切换逻辑)。使用 Xcode 11.2 / iOS 13.2 测试。

    struct ContentView: View {
        @State var selectedView: Int? = nil
    
        var body: some View {
            ZStack {
                NavigationView {
                    VStack {
                        Section {
                            Color(red: 0.88, green: 0.88, blue: 0.88)
                                .frame(maxWidth: .infinity, maxHeight: .infinity).edgesIgnoringSafeArea(.all)
                            HStack {
    
                                Button(action: {
                                    withAnimation(.spring())
                                    {
                                        self.selectedView = 1
                                    }
                                }) {
                                    Text("View1")
                                        .font(.headline)
                                        .fontWeight(.regular)
                                        .lineLimit(nil)
                                        .padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 15))
                                        .foregroundColor(self.selectedView == 1 ? .blue : .gray)
                                }.foregroundColor(self.selectedView == 1 ? .blue : .gray)
                                    .padding()
    
    
                                Button(action: {
                                    withAnimation(.spring())
                                    {
                                        self.selectedView = 2
                                    }
                                }) {
                                    Text("View2")
                                        .font(.headline)
                                        .fontWeight(.regular)
                                        .lineLimit(nil)
                                        .padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 15))
                                        .foregroundColor(self.selectedView == 2 ? .blue : .gray)
    
                                }.foregroundColor(self.selectedView == 2 ? .blue : .gray)
                                    .padding()
    
    
                                Button(action: {
                                    withAnimation(.spring())
                                    {
                                        self.selectedView = 3
                                    }
                                }) {
                                    Text("View3")
                                        .font(.headline)
                                        .fontWeight(.regular)
                                        .lineLimit(nil)
                                        .padding(EdgeInsets.init(top: -5, leading: 15, bottom: 0, trailing: 10))
                                        .foregroundColor(self.selectedView == 3 ? .blue : .gray)
    
                                }.foregroundColor(self.selectedView == 3 ? .blue : .gray)
                                    .padding()
                            }}}
                }
                VStack (alignment: .center) {
                    if self.selectedView == 1 {
                        ShowView1().transition(
                            AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
                    }
    
                    if self.selectedView == 2 {
                        ShowView2().transition(
                            AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
                    }
    
                    if self.selectedView == 3 {
                        ShowView3().transition(
                            AnyTransition.move(edge: .bottom).combined(with: .move(edge: .bottom)).combined(with: .opacity))
                    }
                }}}}
    

    【讨论】:

    • 谢谢,看起来切换逻辑已经排序,但是一旦选择了每个视图,我该如何取消选择呢?
    • @NedBayne-Powell,我会说它被标记了 - 每个视图都有自己的标记,并且选择只能是一个,与所提供的代码相反,其中视图被切换,因此可能的情况是同时显示(或试图显示)两个或多个视图。
    • 感谢您的帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多