如何在 SwiftUI 中对齐 GeometryReader？

Question

我正在尝试使用 GeometryReader 创建一个视图，然后在 ContentView 中使用它，但是无论我做了什么更改，我都无法使使用 GeometryReader 创建的视图对齐到中心，任何人都可以建议我需要在哪里进行更改，谢谢

我使用 GeometryReader 的视图

import SwiftUI

struct DiceView: View {
    let randomNumber = Int.random(in: 400...1000)
    @Binding var randomRoll: Int
    
    var body: some View {
     
        GeometryReader { geo in
                Text("\(randomRoll)")
                    .font(.title)
                    .padding(.horizontal)
                    .background(
                Rectangle()
                        .foregroundColor(Color(hue: min(1, geo.frame(in: .global).minY/CGFloat(randomNumber) ), saturation: 1, brightness: 1))
                        .frame(minWidth: 120, minHeight: 120)
                    
                    .cornerRadius(10))
            
            }
       
        .frame(height: 150)
    }

}

我在哪里使用它

import SwiftUI

struct DiceRoller: View {

    let columns = [
               GridItem(.flexible()),
               GridItem(.flexible()),
               GridItem(.flexible()),
       ]
    
   @State private var number = 9
   @State private var type = (1...10).map { _ in Int.random(in: 1...10)}
   @State var total = [Int]()
    var body: some View {
        LazyVGrid(columns: columns,  spacing: 10) {
            ForEach(0..<number, id: \.self) { item in
                
                DiceView(randomRoll: $type[item])
                    .onAppear {
                        total.append(type[item])
                    }
 
                }
            
            Text("\(total.reduce(0, +))")
               
            
                    }
      
        .padding(.horizontal)
    }
}

我在屏幕上看到的

Answer 1

看起来您将.frame修饰符放置在错误的位置（修饰符的放置很重要）

这是修改后的代码（假设我理解您的意图）

var body: some View {
    GeometryReader { geo in
        Text("\(randomRoll)")
            .font(.title)
            .padding(.horizontal)
            .frame(maxWidth: .infinity, maxHeight: .infinity) // << before background !!
            .background(
                Rectangle()
                    .foregroundColor(Color(hue: min(1, geo.frame(in: .global).minY/CGFloat(randomNumber) ), saturation: 1, brightness: 1))
                    .cornerRadius(10))
        
    }
    .frame(height: 150)
}