调整窗口大小时，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))
                    )
            }
        }