SwiftUI：如何在屏幕上居中显示多列选择器

Question

我使用 SwiftUI 创建了一个多列选择器，我希望它在屏幕上居中。然而，无论我尝试什么，它仍然像图片上显示的那样留下轮廓。

我尝试过的：

在 GeometryReader、HStack 和 VStack 上添加（对齐方式：.center）。
正在尝试使选择器本身居中
将拾取器放入容器中并居中

所以问题是如何使 3 列选择器在屏幕上居中。感谢您的支持！

保罗

import SwiftUI
import Combine

struct ContentView: View {
    
    @State var initial = "n"
    @State var final = "iu"
    @State var tone = 2
    @State var pinyin = ""
    
    var initials = ["b","c","ch","d","f","g","h","k","l","m","n","p","q","r","s","sh","t","w","x","z","zh"]
    var finals = ["a","ai","an","ang","ao","e","ei","en","eng","er","i","ia","ian","iang","iao","ie","in","iong","iu","o","ong","u","ua","uan","uang","uai","ui","un","uo","ü","üan","üe","ün"]
    var tones = [Int](1..<6)
    
    var body: some View {
        VStack{
            
            Text("你")
                .font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/)
            
            GeometryReader { geometry in
                HStack{
                    
                    Picker(selection: self.$initial, label: Text("")) {
                        ForEach(0 ..< self.initials.count) { index in
                            Text("\(self.initials[index])").tag(self.initials[index])
                        }
                    }
                    .onReceive(Just(initial), perform: { value in
                        updatePinyin()
                    })
                    .frame(width: geometry.size.width/6, height: 200).clipped()
                    
                    Picker(selection: self.$final, label: Text("")) {
                        ForEach(0 ..< self.finals.count) { index in
                            Text("\(self.finals[index])").tag(self.finals[index])
                        }
                    }
                    .onReceive(Just(final), perform: { value in
                        updatePinyin()
                    })
                    .frame(width: geometry.size.width/6, height: 200).clipped()
                    
                    Picker(selection: self.$tone, label: Text("")) {
                        ForEach(0 ..< self.tones.count) { index in
                            Text("\(self.tones[index])").tag(self.tones[index])
                        }
                    }
                    .onReceive(Just(tone), perform: { value in
                        updatePinyin()
                    })
                    .frame(width: geometry.size.width/6, height: 200).clipped()
                }
            }
            
            Text(pinyin)
            
        }
    }
    
    func updatePinyin() {
        
        pinyin = initial + final + String(tone+1)
        print(pinyin)
        
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
        }
    }
}

Answer 1

不太确定最终目标，但对于提供的代码，只需让 Stack 消耗 GeometryReader 提供的所有 space 即可完成，例如

HStack{
 
  // ... other code here 

}
.frame(maxWidth: .infinity)     // << this one !!

测试 Xcode 12.4 / iOS 14.4

Answer 2

在Picker(s)的两边加上垫片就可以了，这样，

  HStack { 
       Spacer()
       // Other Codes
       Spacer()
  }

SwiftUI：如何在屏幕上居中显示多列选择器

SwiftUI: How to center multi column picker on screen

picker

swiftui