SwiftUI使按鈕在HStack中水平地彼此靠近

我試圖使鍵盤上的按鈕水平地彼此靠近。首先我嘗試調整按鈕框架的寬度。但是我發現如果我減小框架寬度，一些像“W”這樣的長寬度字符將無法正確顯示。

然后我嘗試使 HStack 的間距為負，就像我在下面的代碼中所做的那樣。

但這會導致按鈕相互重疊，并且可點擊區域將向左移動，這是不可接受的（可以通過將背景顏色設定為藍色來檢查）。

有沒有辦法在不改變字體大小的情況下減少按鈕距離？

struct KeyboardView: View {

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

    var body: some View {
        VStack(spacing: 9) {                      
            ForEach(KeyboardStack.indices) { row in
                let num = KeyboardStack[row].indices
                HStack(spacing: -12) {           
                    ForEach(num) { column in
                        Button(KeyboardStack[row][column]) {}
                        .frame(width: 12, height: 12,alignment: .center)
                        .padding()
//                        .background(Color.blue)
                        .font(.system(size: 15, weight: .regular, design: .default))
                        .foregroundColor(.white)
                        .buttonStyle(PlainButtonStyle())
                    }
                }
                .frame(width: 255, height: 19.5, alignment:.center)
            }
        }
        .frame(width: 445, height: 60, alignment:.center)
    }
}

uj5u.com熱心網友回復：

要做的第一件事是擺脫padding()為每個按鈕添加額外填充的修飾符。

我假設，鑒于這是一個鍵盤視圖，您希望所有鍵的寬度相同。您可以使用 aPreferenceKey來存盤適合某個字母所需的最大寬度，然后將其用于 each Button，使其僅根據需要變大：

struct KeyboardView: View {
    @State private var keyWidth : CGFloat = 0
    
    let KeyboardStack = [["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
                          ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
                          ["Z", "X", "C", "V", "B", "N", "M"]]

    var body: some View {
        VStack(spacing: 9) {
            ForEach(KeyboardStack.indices) { row in
                let num = KeyboardStack[row].indices
                HStack(spacing: 0) {
                    ForEach(num) { column in
                        Button(KeyboardStack[row][column]) {}
                        .font(.system(size: 15, weight: .regular, design: .default))
                        .foregroundColor(.white)
                        .buttonStyle(PlainButtonStyle())
                        .frame(width: keyWidth)
                        .background(GeometryReader {
                                                    Color.clear.preference(key: KeyWidthKey.self,
                                                                           value: $0.frame(in: .local).size.height)
                                                })
                    }
                }.onPreferenceChange(KeyWidthKey.self) { keyWidth = $0 }

            }
        }
    }
}

struct KeyWidthKey: PreferenceKey {
    static var defaultValue: CGFloat { 0 }
    static func reduce(value: inout Value, nextValue: () -> Value) {
        value = max(value, nextValue())
    }
}

請注意，如果您更改字體大小，此解決方案將繼續有效，因為它不依賴于frame每個鍵的硬編碼大小。

uj5u.com熱心網友回復：

這是為您重構的代碼和方式：，

PS：還有很多空間可以進行更多重構，例如擺脫硬編碼值并使鍵和鍵盤大小根據螢屏大小動態變化等等，例如支持其他語言或小寫或大寫單詞，為鍵添加聲音按串列可以繼續下去。這是一種簡單的方法，您可以根據需要開始或使用這種方式。這就是為什么蘋果有一個大團隊專門為鍵盤作業，這看起來很簡單，但是當我們需要通過鍵盤輸入一些東西時，我們使用的 iOS 中的鍵盤比我們所知道的應用程式中的應用程式要復雜得多.

struct KeyboardView: View {

    let keyBackgroundColor: Color
    let keyForegroundColor: Color
    let keyboardBackgroundColor: Color

    init(keyBackgroundColor: Color, keyForegroundColor: Color, keyboardBackgroundColor: Color) {
        self.keyBackgroundColor = keyBackgroundColor
        self.keyForegroundColor = keyForegroundColor
        self.keyboardBackgroundColor = keyboardBackgroundColor
    }
    
    init() {
        self.keyBackgroundColor = Color.gray
        self.keyForegroundColor = Color.primary
        self.keyboardBackgroundColor = Color.gray.opacity(0.5)
    }

    private let keyboard: [[String]] = [["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
                                        ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
                                        ["Z", "X", "C", "V", "B", "N", "M"]]
    
    var body: some View {
        
        VStack(spacing: 5.0) {
            
            ForEach(keyboard.indices) { row in
                let num = keyboard[row].indices
                
                HStack(spacing: 5.0) {
                    
                    ForEach(num) { column in
                        
                        keyBackgroundColor.cornerRadius(2.0)
                            .frame(width: 24.0, height: 24.0)
                            .overlay( Text(keyboard[row][column])
                                        .font(.system(size: 15.0, weight: .regular, design: .default))
                                        .foregroundColor(keyForegroundColor)
                                        .fixedSize() )
                            .onTapGesture { print(keyboard[row][column]) }
                        
                    }
                }
                
            }
        }
        .padding(5.0)
        .background(keyboardBackgroundColor.cornerRadius(5.0))
        
    }
}

帶有一些自定義代碼的用例：

uj5u.com熱心網友回復：

我建議Button僅用作包裝視圖，構建按鈕的內容而不是直接使用字串。您可以輕松控制其布局。

VStack(spacing: 4) {
    ForEach(keys.indices) { row in
        HStack(spacing: 3) {
            ForEach(keys[row].indices) { column in
                Button {
                    print("Tap \(keys[row][column])")
                } label: {
                    Text(keys[row][column])
                        .font(.system(size: fontSize))
                        .foregroundColor(.white)
                        .frame(minWidth: fontSize)
                        .padding(3)
                        .background(
                            RoundedRectangle(cornerRadius: 2)
                                .fill(.black)
                        )
                }
            }
        }
    }
}

結果

標籤：迅速 按钮 迅捷

上一篇：為什么SwiftUI中的影片會跳來跳去

下一篇：在CAShape圖層周圍繪制矩形