0

我正在尝试根据设备宽度实现两种不同的视图。所以这个视图的 iPad 版本应该和 iPhone 版本不同。为此，我使用 GeometryReader 检查宽度。但是，该应用程序总是因“线程 1：信号 SIGABRT”而崩溃。每个人对自己工作的看法都完美无缺。

如果我在宽度小于 592 的 iPad 分屏中启动它，它可以正常工作。之后能不崩溃而改变成大的尺寸。如果以大于 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,
      "category": "vegetables",
      "name": "Potato",
    }
]

有任何想法吗？

4

2 回答 2

0

不确定这是否是正确的解决方案，但是当宽度大于 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)
            }
        }
    }
于 2020-08-12T12:01:51.250 回答
0

在这种情况下，最好明确检查您需要什么：

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在同一个布局堆栈上获得了不同的值（首先它是 .0，其次它是真实的），因此您的条件的不同分支在相同的情况下被激活布局堆栈，这让 SwiftUI 渲染引擎变得疯狂。（您可以为此向 Apple 提交反馈，但很难解决，因为这是鸡蛋问题 - 几何阅读器总是要两次）。

于 2020-08-12T09:28:07.883 回答