在 SwiftUI 中使用 ForEach 进行迭代时，如何确保视图显示在其他视图之上? [英] How to ensure view appears above other views when iterating with ForEach in SwiftUI?

问题描述

我有一个 SwiftUI 视图，它是一个圆形视图，当点击时会打开并应该扩展在其右侧的 UI 上.我怎样才能确保它会出现在另一个 ui 之上?其他 UI 元素是使用 ForEach 循环创建的.我试过 zindex 但它不起作用.我错过了什么?

ZStack {VStack(对齐:.领先){文本(所有工作站")ZStack {图表背景()HStack(对齐:.底部，间距:15.0){ForEach(Array(zip(1..., dataPoints)), id: \.1.id) { number, point inVStack(对齐:.center，间距:5){DataCircle().zIndex(10)ChartBar(percentage: point.percentage).zIndex(-1)文本(点.月).font(.caption)}.frame(宽度:25.0，高度:200.0，对齐方式:.bottom).animation(.default)}}.offset(x: 30, y: 20)}.frame(宽:500，高:300，对齐:.center)}}}}

解决方案

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

这里是简化的复制demo，展示效果

struct TestBarZIndex:查看{@State 私有变量选择:Int?= 零var主体:一些视图{ZStack {VStack(对齐:.领先){文本(所有工作站")ZStack {Rectangle().fill(Color.yellow)//ChartBackground()HStack(对齐:.底部，间距:15.0){ForEach(1...10) { 输入数字VStack(间距:5){垫片()ZStack() {//DataCircle()Circle().fill(Color.pink).frame(width: 20, height: 20).onTapGesture { self.selection = number }if number == self.selection {文本(顶部描述").fixedSize()}}Rectangle().fill(Color.green)//ChartBar().frame(width: 20, height: CGFloat(Int.random(in: 40...150)))文字(君").font(.caption)}.zIndex(number == self.selection ? 1 : 0)//<<这里 ！！.frame(宽度:25.0，高度:200.0，对齐方式:.bottom).animation(.default)}}}.frame(高度:300)}}}}

I have a SwiftUI view that is a circular view which when tapped opens up and is supposed to extend over the UI to its right. How can I make sure that it will appear atop the other ui? The other UI elements were created using a ForEach loop. I tried zindex but it doesn't do the trick. What am I missing?

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 have effect for views within one container. So to solve your case, as I assume expanded DataCircle on click, you need to increase zIndex of entire bar VStack per that click by introducing some kind of handling selection.

Here is simplified replicated demo to show the effect

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)
            }
        }
    }
}

这篇关于在 SwiftUI 中使用 ForEach 进行迭代时，如何确保视图显示在其他视图之上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！