SwiftUi 如何在侧面显示带有小键盘的键盘

Question

我需要在我的应用程序中显示一个完整的键盘，旁边有一个小键盘，就像我从波音应用程序中截屏的那个。

我尝试了 .keyboardType(.numberPad) 和许多其他修改器，但我无法获得与之前提到的波音应用程序相同的键盘。

有什么想法吗？

谢谢

Keyboard I'm looking for

Answer 1

基本 Apple 键盘在第二页上包含数字。如果您需要字符和数字，我会使用它，或者如果您只需要数字，我会使用 .numberPad。除非您将此键盘用于全屏 iOS 或 iPad，否则您的屏幕截图看起来太宽了 UI 无法工作。此外，要获得自定义键盘可能提供的任何好处，构建键盘将需要大量工作。

这是一个自定义键盘的工作示例，可帮助您入门。显然，您需要改进外观并添加更多按钮，但这将说明您想要的基本结构。

struct CustomKeybaord: View {

    @State var text: String = ""

    let topCharacters: [String] = ["Q", "W", "E", "R", "T", "Y", "U", "I","O", "P"]
    let topMiddleCharacters: [String] = ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
    let bottomMiddleCharacters: [String] = ["Z", "X", "C", "V", "B", "N", "M"]

    func keyboardTap(character: String) {
        self.text += character
    }
                                    
    var body: some View {
        VStack {
            Text(text)
            HStack {
                ForEach(topCharacters, id: \.self) { character in
                    KeyboardButton(character: character, color: .white, function: keyboardTap)
                        .padding(5)
                }
            }
        
            HStack {
                ForEach(topMiddleCharacters, id: \.self) { character in
                    KeyboardButton(character: character, color: .white, function: keyboardTap)
                        .padding(5)
                }
            }
            .padding(.horizontal, 50)
        
            HStack {
                ForEach(bottomMiddleCharacters, id: \.self) { character in
                    KeyboardButton(character: character, color: .white, function: keyboardTap)
                        .padding(5)
                }
            
            }
            .padding(.horizontal, 75)
        }
        .background(Color.init(white: 0.9))
        .frame(height: 100)
    }
 }

struct KeyboardButton: View {
    let character: String
    let color: Color
    var function: (String) -> Void
    var body: some View {
        Button {
            function(character)
        } label: {
            Text(character)
                .padding()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(color)
                .foregroundColor(.black)
        }
    }
}

您还需要将 HStacked ForEach 抽象成一个中间视图。

留给您做的最困难的事情是找到一种负责任地计算按键尺寸的方法。除非您希望它们是固定尺寸（这不是一个好主意，因为它只适用于一个 iPad 尺寸），您将找到一种计算通用按钮尺寸的方法使用 GeometryReader 的整体屏幕宽度。在我的示例中，我使用 frame(maxWidth: .infinity, maxHeight: .infinity) 为一行中的每个按钮设置相同的大小，但这并不能确保不同行上的按钮大小相同。

SwiftUi 如何在侧面显示带有小键盘的键盘

SwiftUi how to display a keyboard with numpad in the side

keyboard

numpad

swiftui