SwiftUI-GeometryReader使SIGABRT崩溃

问题描述

我正在尝试根据设备的宽度实现两个不同的视图。因此，此视图的iPad版本应与iPhone版本不同。为此，我使用GeometryReader检查宽度。但是，该应用程序始终会因“线程1：信号SIGABRT”而崩溃。 每个视图各自的工作效果都很好。

如果我在iPad的Splitscreen中以小于592的宽度启动它，则可以正常工作。之后，我可以将其更改为大尺寸而不会崩溃。如果宽度开头大于592，则会崩溃。

如果我仅使用if语句而不使用else，那么它也会起作用。

即使在最严重的崩溃中进行测试。

这是我的代码：

import SwiftUI

struct DetailView: View {
    
    let food: FoodList
    
    @State var showRightMenu = false
    
    var body: some View {
        GeometryReader { bounds in
            ZStack (alignment: .topLeading) {

                // Test
                if bounds.size.width > 592 {
                    Text("Test")
                } else {
                    Text("Test1")
                    Text("Test2")
                }

                // Actual code
//                if bounds.size.width > 592 {
//                    HStack {
//                        FoodDetailPadViewLeft(food: self.food)
//                            .frame(width: bounds.size.width / 2)
//
//                        FoodDetailPadViewRight(food: self.food)
//                    }
//                } else {
//                    ScrollView {
//                        FoodDetailViewImage(food: self.food)
//                            .animation(.none)
//
//                        FoodDetailViewNutris(food: self.food)
//
//                        Spacer()
//                    }
//                }
                
                HStack {
                    BackButton()
                    Spacer()
                    InfoButton(showRightMenu: self.$showRightMenu)
                }
            }
            .background(Color("background"))
            .edgesIgnoringSafeArea(.all)
            .navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
        }
    }
}

以下是一些可复制的代码：

import SwiftUI

struct ContentView: View {
    @State var foodlist: [FoodList] = Bundle.main.decode("ingredientsList.json")
    
    var body: some View {
        
        NavigationView {
            List {
                ForEach(foodlist) { food in
                    NavigationLink (destination: TestView(food: food)) {
                        Text(food.name)
                    }
                }
            }
        }
    }
}


struct TestView: View {
    let food: FoodList
    
    var body: some View {
        GeometryReader { bounds in
            ZStack (alignment: .topLeading) {
                
                if bounds.size.width > 592 {
                    Text(self.food.name)
                } else {
                    Text(self.food.name)
                    Text(self.food.category)
                }
            }
        }
    }
}



struct FoodList: Codable,Identifiable,Hashable {
    let id: Int
    let category: String
    let name: String
}


extension Bundle {
    func decode<T: Codable>(_ file: String) -> T {
        guard let url = self.url(forResource: file,withExtension: nil) else {
            fatalError("Failed to locate \(file) in bundle.")
        }
        
        guard let data = try? Data (contentsOf: url) else {
            fatalError("Failed to load \(file) from bundle.")
        }
        
        let decoder = JSONDecoder()
        
        guard let loaded = try? decoder.decode(T.self,from: data) else {
            fatalError("Failed to decode \(file) from bundle.")
        }
        
        return loaded
    }
}

和Json文件：

[
    {
      "id": 1,"category": "vegetables","name": "Tomato",},{
      "id": 2,"name": "Potato",}
]

有什么想法吗？

解决方法

在这种情况下，最好明确检查所需内容：

var body: some View {
    ZStack (alignment: .topLeading) {
        if UIDevice.current.userInterfaceIdiom == .pad {
            Text(self.food.name)
        } else {
            Text(self.food.name)
            Text(self.food.category)
        }
    }
}

注意：崩溃是由于堆栈上的布局更改而发生的，这是因为同一布局堆栈上的GeometryReader具有不同的值（首先是.zero，第二是真实的） ，因此您条件的不同分支在同一布局堆栈上被激活，这使SwiftUI渲染引擎变得疯狂。 （您可以将有关此问题的反馈意见提交给Apple，但这很难解决，因为它是鸡蛋的问题-几何读取器总是两次。）

,

不知道这是否是正确的解决方案，但是当宽度大于592时，我使用了不透明度来隐藏视图。

目前看来可以正常工作。

    var body: some View {
        GeometryReader { bounds in
            ZStack (alignment: .topLeading) {
                
                Text(self.food.name)
                    .opacity(bounds.size.width > 592 ? 0 : 1)
                
                VStack {
                    Text(self.food.name)
                    Text(self.food.category)
                }
                .opacity(bounds.size.width <= 592 ? 0 : 1)
            }
        }
    }