It seems that zstack still has some issues when recalculating multiple layers with lots of views inside it.
I consider that overly a floating view on zstack, this view was not calculated by zstack, I copied the code of floating view from here, and the following is the code modified from your version:
import SwiftUI
struct TMainWnd: View {
@State var strings: [String] = ["A", "B", "C", "D", "E"]
@State var ints: [Int] = Array(1...300)
@State var selectedInt: Int?
@State var isShow = false
var body: some View {
ZStack {
ScrollView {
VStack {
ForEach(strings, id: \.self) { string in
VStack {
HStack {
Text(string)
Spacer()
}
LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]) {
ForEach(ints, id: \.self) { int in
VStack {
Text(String(int))
Spacer()
}
.frame( maxWidth: .infinity )
.frame(height: 200)
.background(
RoundedRectangle(cornerRadius: 5)
.fill(int % 2 == 0 ? .orange : .green)
)
.onTapGesture {
self.selectedInt = int
}
}
}
}
}
}
.padding()
}
}.floatingView(above: TFloatingWnd(selectedInt: $selectedInt))
}
}
struct TFloatingWnd : View
{
@Binding var selectedInt : Int?
var body: some View {
VStack {
Spacer()
if let selectedInt {
Text( String(selectedInt ) )
}
Spacer()
if let selectedInt {
Button {
self.selectedInt = nil
} label: {
Image(systemName: "x.circle")
.resizable()
.scaledToFit()
.frame(width: 30)
}
}
}.frame( maxWidth: .infinity, maxHeight: .infinity)
}
}
extension View {
func floatingView<Content: View>(above: Content) -> ModifiedContent<Self, Above<Content>> {
self.modifier(Above(aboveContent: above))
}
}
struct Above<AboveContent: View>: ViewModifier {
let aboveContent: AboveContent
func body(content: Content) -> some View {
content.overlay(
GeometryReader { proxy in
Rectangle().fill(Color.clear).overlay(
self.aboveContent,
alignment: .center
)
},
alignment: .center
)
}
}
Topic:
UI Frameworks
SubTopic:
SwiftUI
Tags: