SwiftUI:更改ZStack .zIndex顺序

Question

目标是一个菜单:用户点击绿色按钮:显示绿色菜单，用户点击蓝色按钮:显示蓝色菜单

我所做的:设置一个州“当点击绿色，绿色是ZStack的顶层)。

结果:不起作用:当点击绿色，它就会变成绿色。但我点击蓝色，它就会保持绿色。这个逻辑绝对不正确

import SwiftUI

struct Menutest: View {

    @State private var showall = false
    @State private var showgreen = false
    @State private var showyellow = false
    @State private var showblue = false


    var body: some View {


        NavigationView {

           HStack {

            Spacer()

            ZStack {
                Rectangle()
                .foregroundColor(.blue)
                //.opacity(showblue ? 1 : 0)
               .zIndex(showblue ? 1 : 0)

                Rectangle()
                .foregroundColor(.green)
                 //.opacity(showgreen ? 1 : 0)
                .zIndex(showgreen ? 1 : 0)


                Rectangle()
                .foregroundColor(.yellow)
                 //.opacity(showyellow ? 1 : 0)
                .zIndex(showyellow ? 1 : 0)



            }
            .frame(width: 400.0)
          //  .offset(x: showall ? 0 : UIScreen.main.bounds.width)
            .animation(.easeInOut)

        }





        .navigationBarItems(



            trailing:

            HStack {


            Button(action: {
              //   self.showall.toggle()
                self.showyellow.toggle()
            })
            {
            Text("Yellow")

            }



           Button(action: {
            //     self.showall.toggle()
            self.showgreen.toggle()
            })
            {
            Text("Green")

            }


          Button(action: {
               //   self.showall.toggle()
                 self.showblue.toggle()
                })
                {
                Text("Blue")


               }



             }


            )

       }
      .navigationViewStyle(StackNavigationViewStyle())



    }
}




struct Menutest_Previews: PreviewProvider {
    static var previews: some View {
        Menutest()
        .colorScheme(.dark)
        .previewDevice("iPad Pro (12.9-inch) (3rd generation)")
    }
}

​

​

问:我如何正确地设置一个Z堆栈来显示所选的层？不必使用ZIndex，可以是.hide()修饰符，也可以是其他逻辑。

Answer 1

除了BOOL之外，您还需要从单击的按钮中切换其他BOOLs。

下面的工作，虽然可能有一个更优雅的方式来做。将按钮部分替换为：

Button(action: {
  self.showyellow = true
  self.showgreen = false
  self.showblue = false
 })
 {
  Text("Yellow")
}

Button(action: {
 self.showgreen = true
 self.showblue = false
 self.showyellow = false
})
{
 Text("Green")
}

Button(action: {
 self.showblue = true
 self.showyellow = false
 self.showgreen = false
})
{
 Text("Blue")
}
}

在ZStack中，元素相互堆叠在一起。第一项是最底层，各层互相叠在一起。

在您的版本中，当您单击“黄色”、“蓝色”和“绿色”时，可能仍然会“叠加”黄色层，因此您需要确保移除其他层。

Answer 2

在我看来，如果您有几个Bool值，其中只有一个在任何时候都是真的，那么使用枚举来表示选项要容易得多--管理状态也要容易得多。这就是您所期望的行为：

struct Menutest: View {

    private enum Selection: String, CaseIterable {
        case blue = "Blue"
        case green = "Green"
        case yellow = "Yellow"

        static let allOptions = Array(Selection.allCases)

        func color() -> Color {
            switch self {
            case .blue:
                return .blue
            case .green:
                return .green
            case .yellow:
                return .yellow
            }
        }
    }

    @State private var showing: Selection? = nil

    var body: some View {
        NavigationView {
            HStack {
                Spacer()
                ZStack {
                    ForEach(Selection.allOptions, id: \.self) { selection in
                        Rectangle()
                            .foregroundColor(selection.color())
                            .zIndex(self.showing == selection ? 1 : 0)
                    }
                }   .frame(width: 400.0)
                    .animation(.easeInOut)
            }   .navigationBarItems(trailing:
                HStack {
                    ForEach(Selection.allOptions, id: \.self) { selection in
                        Button(action: { self.showing = selection }) {
                            Text(selection.rawValue)
                        }
                    }
                })
        }   .navigationViewStyle(StackNavigationViewStyle())
    }
}