在SwiftUI中使用ForEach进行迭代时,如何确保视图显示在其他视图之上?

在SwiftUI中使用ForEach进行迭代时,如何确保视图显示在其他视图之上?,swiftui,Swiftui,我有一个SwiftUI视图,它是一个圆形视图,当点击打开时,它应该扩展到UI的右侧。如何确保它显示在其他ui上?其他UI元素是使用ForEach循环创建的。我试过zindex,但没用。我错过了什么 ZStack { VStack(alignment: .leading) { Text("ALL WORKSTATIONS") ZStack { ChartBackground() HStack(alignment: .bottom, spacing:

我有一个SwiftUI视图,它是一个圆形视图,当点击打开时,它应该扩展到UI的右侧。如何确保它显示在其他ui上?其他UI元素是使用ForEach循环创建的。我试过zindex,但没用。我错过了什么

ZStack {
  VStack(alignment: .leading) {
    Text("ALL WORKSTATIONS")
    ZStack {

      ChartBackground()

      HStack(alignment: .bottom, spacing: 15.0) {



        ForEach(Array(zip(1..., dataPoints)), id: \.1.id) { number, point in
          VStack(alignment: .center, spacing: 5) {



          DataCircle().zIndex(10)
          ChartBar(percentage: point.percentage).zIndex(-1)
          Text(point.month)
            .font(.caption)
        }
        .frame(width: 25.0, height: 200.0, alignment: .bottom)
        .animation(.default)
      }
    }
    .offset(x: 30, y: 20)
       }
      .frame(width: 500, height: 300, alignment: .center)
     }
   }
  }
}

.zIndex对一个容器内的视图有效。所以为了解决您的问题,我假设单击时扩展了DataCircle,您需要通过引入某种处理选择来增加每次单击时整个条VStack的zIndex

下面是一个简化的复制演示来展示效果


.zIndex对一个容器内的视图有效。所以为了解决您的问题,我假设单击时扩展了DataCircle,您需要通过引入某种处理选择来增加每次单击时整个条VStack的zIndex

下面是一个简化的复制演示来展示效果


我认为这个问题与ForEach循环有一定的关系。我认为这个问题与ForEach循环有一定的关系。
struct TestBarZIndex: View {
    @State private var selection: Int? = nil
    var body: some View {
        ZStack {
            VStack(alignment: .leading) {
                Text("ALL WORKSTATIONS")
                ZStack {
                    Rectangle().fill(Color.yellow)//ChartBackground()
                    HStack(alignment: .bottom, spacing: 15.0) {
                        ForEach(1...10) { number in
                            VStack(spacing: 5) {
                                Spacer()
                                ZStack() { // DataCircle()
                                    Circle().fill(Color.pink).frame(width: 20, height: 20)
                                        .onTapGesture { self.selection = number }
                                    if number == self.selection {
                                        Text("Top Description").fixedSize()
                                    }
                                }
                                Rectangle().fill(Color.green) // ChartBar()
                                    .frame(width: 20, height: CGFloat(Int.random(in: 40...150)))
                                Text("Jun")
                                    .font(.caption)
                            }.zIndex(number == self.selection ? 1 : 0) // << here !!
                            .frame(width: 25.0, height: 200.0, alignment: .bottom)
                            .animation(.default)
                        }
                    }
                }
                .frame(height: 300)
            }
        }
    }
}