[英]SwiftUI TextField text bounds fail to update with GeometryReader when window resized, causing buggy looks
The buggy looks include the text looks vertically truncated, and the blue selection border doesn't match.错误的外观包括文本看起来垂直截断,并且蓝色选择边框不匹配。 These issues are directly related and is touched upon further in the question.这些问题是直接相关的,并在问题中进一步涉及。
I have been told that I should ask individual questions when I am experiencing TextField issues.有人告诉我,我应该在遇到 TextField 问题时提出个别问题。 So here is one.所以这是一个。 The issue is when the text size is dependant on window width, resizing the window gives it a buggy look.问题是当文本大小取决于窗口宽度时,调整窗口大小会使其看起来有问题。 Take a look at the screenshots.看看屏幕截图。 The code is in a VStack
and GeometryReader
.代码位于VStack
和GeometryReader
。
Code:代码:
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))
)
Here are screenshots showing this behavior.以下是显示此行为的屏幕截图。
Normal Window:普通窗口:
It looks like this when I resize it:当我调整它的大小时,它看起来像这样:
But as soon as I click on the fields, it looks normal again:但是一旦我点击字段,它看起来又正常了:
I have also noticed that the blue selection border does not scale.我还注意到蓝色选择边框没有缩放。 I presume that the blue border shows the border of the text, so this seems directly tied to the truncation of the text.我认为蓝色边框显示了文本的边框,所以这似乎与文本的截断直接相关。
How would I go about fixing this issue?我将如何解决这个问题?
A possible approach would be updating the window every time it is resized, but I am reluctant to do that for performance reasons.一种可能的方法是在每次调整窗口大小时更新窗口,但出于性能原因,我不愿意这样做。 But if performance is not an issue here, I need to know how to call a function when the window is resized from within the view.但是,如果这里的性能不是问题,我需要知道如何在从视图内调整窗口大小时调用函数。
And to make this redundantly clear, I am not creating iOS apps, I am creating macOS apps.为了使这一点更加清晰,我不是在创建 iOS 应用程序,而是在创建 macOS 应用程序。
My expected result is for when the window resizes, I want the textfield to immediately look like the third image, where the text bounds match the new size if the textfield, and thus, the blue border will match the textfield, and the text will not appear truncated.我的预期结果是当窗口调整大小时,我希望文本字段立即看起来像第三个图像,如果文本字段,文本边界与新大小匹配,因此,蓝色边框将与文本字段匹配,而文本不会出现截断。 What can I add to my code to fix it, in the most efficient way possible?我可以在我的代码中添加什么来以最有效的方式修复它? How can I update the textfield bounds with the GeometryReader?如何使用 GeometryReader 更新文本字段边界?
Note: This bug does not happen IF text is TYPED in the TextField.注意:如果在 TextField 中键入文本,则不会发生此错误。 ONLY when it is empty.仅当它为空时。
Summarised list of notes:总结笔记列表:
Given this information, how can I make the textfields immediately look like the third image when resizing, rather than the second/fourth, so I fix this issue?鉴于此信息,如何在调整大小时使文本字段立即看起来像第三个图像,而不是第二个/第四个图像,所以我解决了这个问题?
Is there any way to fix this bug while preserving the look of the text fields?有没有办法在保留文本字段外观的同时修复此错误?
By my investigation the observed issue is originated from PlainTextFieldStyle
style usage... no workaround for this (you can report feedback to Apple cause it is definitely issue).通过我的调查,观察到的问题源于PlainTextFieldStyle
样式的使用......没有解决方法(您可以向 Apple 报告反馈,因为这绝对是问题)。 So if the topic issue is critical I recommend to use SquareBorderTextFieldStyle
explicitly as below for text fields with such behaviour (at least temporary).因此,如果主题问题很关键,我建议对具有此类行为(至少是暂时的)的文本字段显式使用如下所示的SquareBorderTextFieldStyle
。 Square style tested & worked in the posted scenario with Xcode 11.2 / macOS 10.15. Square 风格已在 Xcode 11.2 / macOS 10.15 发布的场景中测试和工作。
Here is result of different configurations:这是不同配置的结果:
Here is code for screenshot result:这是屏幕截图结果的代码:
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))
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.