使用SwiftUI观察窗口调整大小事件

hts6caw3  于 11个月前  发布在  Swift
关注(0)|答案(3)|浏览(116)

我目前有一个LazyVGrid设置如下:

struct NetworkGrid: View {
    var networks: [Network]
    let columns = [
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible())
        ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns) {
                ForEach(networks) { network in
                    NetworkCard(network: network)
                }
            }
        }
    }
}

字符串
我想根据当前窗口大小设置网格列数,即

func windowDidResize(_ notification: Notification) {
    itemWidth = CGFloat(300)
    if window.width <= itemWidth {
        GridItem(.flexible()), GridItem(.flexible())
    } else if window.width <= itemWidth * 2 {
        GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())
    } else if window.width <= itemWidth * 3 {
        GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())
    }
    ...
}


我该如何在SwiftUI中实现这样一个观察者?

yeotifhr

yeotifhr1#

不使用GeometryReader也可以做到这一点:

let networkCardSize = 200

ScrollView(.vertical) {
    LazyVGrid(
        columns: [
            // Move an item across rows iff it has enough space
            // to contain *just* the item (+ padding).
            GridItem(.adaptive(minimum: networkCardSize, maximum: networkCardSize)
        ],
        alignment: .leading,
        spacing: 0
    ) {
        ForEach(networks) { network in
            NetworkCard(network: network)
                .padding(10)
        }
    }
}

字符串
spacing没有像我预期的那样工作,但可能有一个很好的解决方案。我也不确定动态大小的元素在这里的表现如何。静态大小是伟大的,虽然!
x1c 0d1x的数据

9rygscc1

9rygscc12#

如果要在视图调整大小时更新@State@ObservedObject变量,可以使用onAppear(perform:)以初始视图大小更新变量,并使用onChange(of:perform:)检测视图大小更改:

struct MyView: View {
  @State private var size: CGSize = .zero

  var body: some View {
    GeometryReader { geometry in
      ZStack {
        Text("Hello World")
      }.onAppear {
        size = geometry.size
      }.onChange(of: geometry.size) { newSize in
        size = newSize
      }
    }
  }
}

字符串

w9apscun

w9apscun3#

监听窗口大小的SwiftUI等价物可能是使用GeometryReader。在您的示例中,您可以读取大小并根据其宽度阅读动态决定列:

struct NetworkGrid: View {
    var networks: [Network]
    
    func columnsForWidth(width: CGFloat) -> [GridItem] {
        print("Columns for width: \(width)")
        return Array(repeating: GridItem(.flexible()), count: Int(width) / 100)
    }
    
    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                LazyVGrid(columns: columnsForWidth(width: geometry.size.width)) {
                    ForEach(networks) { network in
                        NetworkCard(network: network)
                    }
                }
            }
        }
    }
}

字符串

相关问题