[SwiftUI] GeometryReaderを使ったものをScrollViewで並べると位置がずれてしまう

Question

##困っていること
iPhoneの大きさに合わせて相対的な大きさのビューを用いたいので、GeometryReaderを使っています。

画像のビューはGeometryReaderで作られたビュー(①)とそれらをScrollIewで鉛直方向に配置するビュー(②)の２つでできています。
①はPreViewでも期待通りの挙動をするのですが、それらをスクロールビューで配置すると左によってしまいます。（スクロールはできる）
どのようにすれば真ん中に配置できるでしょうか。どんなことでもご指南いただければ幸いです。
##試したこと
左によっているということはframe(alignment: .leading)がデフォルトで設定されていると思い、②のビューに.frame(alignment: .center)を設定した。
##ソースコード

GeometryReaderで作られたビュー(①)

mport SwiftUI

struct ListRow: View {
    
    var rValue: Int
    var gValue: Int
    var bValue: Int
    func judgeColorNumber (r:Int,g:Int,b:Int) -> Double {
        return Double(r)*0.299+Double(g)*0.587+Double(b)*0.114
    }
    

    var body: some View {
         
        VStack {
            
            
        Group {
           
        if self.judgeColorNumber(r: self.rValue, g: self.gValue, b: self.bValue) < 186{
             GeometryReader { geometry in //追加
            Text("(String(self.rValue, radix: 16))(String(self.gValue, radix: 16))(String(self.bValue, radix: 16))")

            .foregroundColor(Color.white)
            .fontWeight(.semibold)
            .frame(width: geometry.size.width-50, height: 50, alignment: .center)
            .background(Color.init(UIColor(self.rValue,self.gValue,self.bValue)))
            .cornerRadius(10)
            .shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0)
                }
        } else {
            GeometryReader { geometry in
            Text("(String(self.rValue, radix: 16))(String(self.gValue, radix: 16))(String(self.bValue, radix: 16))")

            .foregroundColor(Color.black)
            .fontWeight(.semibold)
            .frame(width: geometry.size.width-50, height: 50)
            .background(Color.init(UIColor(self.rValue,self.gValue,self.bValue)))
             .cornerRadius(10)
            }
            } 
        }
            
        
       
        .shadow(color: Color.gray.opacity(0.7), radius: 10.0, x: 0.0, y: 0.0)
        }.frame(height: 50)
    }
}

struct ListRow_Previews: PreviewProvider {
    static let favoriteArray = ObservedRGB()
    static var previews: some View {
        ListRow(rValue: 132, gValue: 30, bValue: 120)
    }
}

ScrollIewで鉛直方向に配置するビュー(②)

import SwiftUI



struct MainList: View {
    @EnvironmentObject var favoriteArray: ObservedRGB
    private func reversedFavoriteArray (arr: [[Int]]) -> [[Int]] {
        
        return arr.reversed()
    }
    
    var body: some View {
        
                NavigationView{
                    ScrollView(.vertical) {
                    
                        VStack(spacing: 10.0) {
                            
                ForEach(0..<self.favoriteArray.rgbArray.count, id: .self) { item in
                    
                    ListRow(rValue: self.reversedFavoriteArray(arr: self.favoriteArray.rgbArray)[item][0], gValue: self.reversedFavoriteArray(arr: self.favoriteArray.rgbArray)[item][1], bValue: self.reversedFavoriteArray(arr: self.favoriteArray.rgbArray)[item][2])
                
               
                        }.frame(alignment: .center)
                    }
                    }
                    .navigationBarTitle("cliped",displayMode: .inline)
    }
    }
}
    

struct MainList_Previews: PreviewProvider {
    static let favoriteArray = ObservedRGB()
    static var previews: some View {
        MainList().environmentObject(favoriteArray)
    }
}