未填充LazyVGrid .fixed参数

Question

我有4个按钮，并希望它们都是相同宽度的事件，如果按钮内容是"123123"或"2"，我希望它们的所有宽度都相同我在我的GridItem数组中添加了.fixed(100)，但它似乎不起作用

这是你可以看到宽度不同的照片

​

​

struct ContentView: View {
    var num1:Int = 0
    var num2:Int = 0
    var privateGridLayout = [GridItem(.fixed(100)),GridItem(.fixed(100))]
    var body: some View {
        ZStack{
            VStack{
                
            }
            LazyVGrid(columns: privateGridLayout, spacing: 10) {
                BB(content: "AC", value: 1)
                BB(content: "TE", value: 1)
                BB(content: "%", value: 1)
                BB(content: "%", value: 1)
            }
        }
    }
}


struct BB:View {
    var content:String
    var value:Int
    var body:some View{
        Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
            Text(content)
        }.padding()
        .background(Color.gray)
        .foregroundColor(Color.white)
        .frame(minWidth: /*@START_MENU_TOKEN@*/0/*@END_MENU_TOKEN@*/, maxWidth: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, minHeight: 50)
        .font(.system(size:40))
        .cornerRadius(5)
    }
}

Answer 1

可以通过在frame之后移动background修改器来修复此问题。当它被放在前面时，它只适用于内容大小，而不适用于“填充”大小。查看Why modifier order matters

struct BB:View {
    var content:String
    var value:Int
    var body:some View{
        Button(action: {}) {
            Text(content)
        }.padding()
            .foregroundColor(Color.white)
            .frame(maxWidth: .infinity, minHeight: 50)
            .background(Color.gray)
            .font(.system(size:40))
            .cornerRadius(5)
    }
}

结果：

​

​

Answer 2

在BB中试试这个：

Text(content).frame(width: 100, height: 50)

或

Text("\(value)").frame(width: 100, height: 50)