調整窗口大小時，SwiftUI TextField 文本邊界無法使用 GeometryReader 更新，從而導致外觀錯誤

Question

不是 ios

錯誤的外觀包括文本看起來垂直截斷，並且藍色選擇邊框不匹配。 這些問題是直接相關的，並在問題中進一步涉及。

有人告訴我，我應該在遇到 TextField 問題時提出個別問題。 所以這是一個。 問題是當文本大小取決於窗口寬度時，調整窗口大小會使其看起來有問題。 看看屏幕截圖。 代碼位於VStack和GeometryReader 。

代碼：

TextField("World Name", text: self.$WorldName)
    .font(.system(size: geometry.size.width/24))
    .textFieldStyle(PlainTextFieldStyle())
    .padding([.leading, .trailing], 6)
    .frame(width: geometry.size.width*0.75, height: geometry.size.width/20)
    .background(
        RoundedRectangle(cornerRadius: 8)
            .fill(Color.init(white: 0.28))
    )
TextField("World Seed", text: self.$WorldSeed)
    .font(.system(size: geometry.size.width/24))
    .textFieldStyle(PlainTextFieldStyle())
    .padding([.leading, .trailing], 6)
    .frame(width: geometry.size.width*0.75, height: geometry.size.width/20)
    .background(
        RoundedRectangle(cornerRadius: 8)
            .fill(Color.init(white: 0.28))
    )

以下是顯示此行為的屏幕截圖。

普通窗口：

當我調整它的大小時，它看起來像這樣：

但是一旦我點擊字段，它看起來又正常了：

我還注意到藍色選擇邊框沒有縮放。 我認為藍色邊框顯示了文本的邊框，所以這似乎與文本的截斷直接相關。

我將如何解決這個問題？

一種可能的方法是在每次調整窗口大小時更新窗口，但出於性能原因，我不願意這樣做。 但是，如果這里的性能不是問題，我需要知道如何在從視圖內調整窗口大小時調用函數。

為了使這一點更加清晰，我不是在創建 iOS 應用程序，而是在創建 macOS 應用程序。

我的預期結果是當窗口調整大小時，我希望文本字段立即看起來像第三個圖像，如果文本字段，文本邊界與新大小匹配，因此，藍色邊框將與文本字段匹配，而文本不會出現截斷。 我可以在我的代碼中添加什么來以最有效的方式修復它？ 如何使用 GeometryReader 更新文本字段邊界？

注意：如果在 TextField 中鍵入文本，則不會發生此錯誤。 僅當它為空時。

總結筆記列表：

• 我創建了一個 TextField
• TextField 的字體大小取決於 GeometryReader。
• 如果為空，TextField 的文本將被截斷，直到被選中
• 如果在文本字段中鍵入文本，則不會發生該錯誤
• 藍色邊框也與文本字段不匹配，因為我猜這代表了文本字段的邊界，所以這與被截斷的文本直接相關。
• 您可能已經注意到新圖像有一個更多世界選項按鈕。 忽略它。

鑒於此信息，如何在調整大小時使文本字段立即看起來像第三個圖像，而不是第二個/第四個圖像，所以我解決了這個問題？

有沒有辦法在保留文本字段外觀的同時修復此錯誤？

Answer 1

通過我的調查，觀察到的問題源於PlainTextFieldStyle樣式的使用......沒有解決方法（您可以向 Apple 報告反饋，因為這絕對是問題）。 因此，如果主題問題很關鍵，我建議對具有此類行為（至少是暫時的）的文本字段顯式使用如下所示的SquareBorderTextFieldStyle 。 Square 風格已在 Xcode 11.2 / macOS 10.15 發布的場景中測試和工作。

這是不同配置的結果：

這是屏幕截圖結果的代碼：

        GeometryReader { geometry in
            VStack {
                TextField("World Name", text: self.$WorldName)
                    .font(.system(size: geometry.size.width/24))
                    .textFieldStyle(SquareBorderTextFieldStyle())
                    .padding([.leading, .trailing], 6)
                    .frame(width: geometry.size.width*0.75, height: geometry.size.width/20)
//                    .background(
//                        RoundedRectangle(cornerRadius: 8)
//                            .fill(Color.init(white: 0.28))
//                    )
                TextField("World Seed", text: self.$WorldSeed)
                    .font(.system(size: geometry.size.width/24))
                    .textFieldStyle(PlainTextFieldStyle())
                    .padding([.leading, .trailing], 6)
                    .frame(width: geometry.size.width*0.75, height: geometry.size.width/20)
                    .background(
                        RoundedRectangle(cornerRadius: 8)
                            .fill(Color.init(white: 0.28))
                    )
            }
        }