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