未能产生表达诊断；请提交错误报告

Question

我正在尝试制作计算器，但是当我尝试从数组制作按钮时出现此错误，我遵循了一些教程，然后它工作了，当我自己尝试时，代码不会按应有的方式编译。 这是一些代码

struct ContentView: View {
    let value = """
            modern
            calculator
            """
    
    let numbers = [ "7", "8", "9",
                    "4", "5", "6",
                    "1", "2", "3" ]
    
    var body: some View {
        VStack{
            VStack{
                Text(value.self)
                    .fontWeight(.thin)
                    .multilineTextAlignment(.trailing)
                    .frame(width: 416, height: 420)
                    .font(.system(size: 70))
                    .foregroundColor(Color.white)
                 

            }.frame(minWidth: 0,  maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading).background(Color.blue)
            VStack{
                Spacer(minLength: 48)
                VStack{
                    
                
                ForEach(numbers, id:\.self) {
                    number in
                    HStack{
                        Spacer(minLength: 13)

                        ForEach(number, id:\.self){
                            num in
                            
                            Button(action: {}, label: {
                                Text(num).font(.largeTitle).fontWeight(.thin)
                                    .frame(width: 50, height: 50)
                                                .foregroundColor(Color.black)
                                                .background(Color.white)
                                                .clipShape(Circle())
                            })
                        }
                        
            
                    }
                }
                }
            }.frame(minWidth: 0,  maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading).background(Color.black)
        }.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
    }
}

错误出现在第 20 行，当我摆脱这部分时：

ForEach(number, id:\.self){
                            num in
                            Button(action: {}, label: {
                                Text(num).font(.largeTitle).fontWeight(.thin)
                                    .frame(width: 50, height: 50)
                                                .foregroundColor(Color.black)
                                                .background(Color.white)
                                                .clipShape(Circle())
                            })
                        }

代码编译。我想让这个按钮动态，只是为了练习。

Answer 1

我推测因为你想要一个计算器，你试图用第二个ForEach 制作一个网格。为此，您需要输入[[String]]，或您使用的任何类型。但是使用LazyVGrid() 有一个更简单的解决方案。

此外，您需要使用视图修饰符选择一种样式并坚持下去。要么在一行上运行它们，要么使用多行。否则你会错过一些东西。我建议使用多行代码，因为它使您的代码易于作为 SwiftUI 初学者阅读。

有很多关于制作计算器的教程，我会关注它们。处理按钮按下和生成十进制数字可能比您想象的要困难。但是，对于您的 UI 代码：

struct ContentView: View {
    let value = """
            modern
            calculator
            """
    // Added a "." as you will need that button.
    let calcButtons = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."]
    
    let columns = [
        // Using 3 grid items forces there to be 3 columns
        GridItem(.adaptive(minimum: 80)),
        GridItem(.adaptive(minimum: 80)),
        GridItem(.adaptive(minimum: 80))
    ]
    
    var body: some View {
        VStack{
            Text(value.self)
                .fontWeight(.thin)
                .multilineTextAlignment(.trailing)
                .font(.system(size: 70))
                .foregroundColor(Color.white)
            
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(calcButtons, id: \.self) { calcButton in
                    Text(calcButton)
                        .fontWeight(.thin)
                        .font(.system(size: 70))
                        .foregroundColor(Color.white)
                        .background(
                            // Colored red so you can see the size of the buttons. If you remove this, your button
                            // will be the width of the text which varies making the buttons hard to tap.
                            // Change the color to .clear to make a hidden background.
                            Color.red
                                .frame(width: 80, height: 80)
                        )
                }
            }
        }
        .background(Color.blue
                        .edgesIgnoringSafeArea(.all)
        )
        
    }
}