英文:
All TextEditor are resized when any TextEditor has more than one line
问题
我有一个问题。我有一个视图,其中包含多个TextEditors。在任何一个TextEditor中输入会改变它们所有的高度。
你有任何关于发生了什么以及如何修复的想法吗?
示例代码:
import SwiftUI
struct TestingView: View {
@State var optionA = ""
@State var optionB = ""
@State private var comment = ""
var body: some View {
NavigationStack {
Form {
VStack() {
CustomRow(title: "Option A", value: $optionA)
CustomRow(title: "Option B", value: $optionB)
}
.padding(.vertical, 20)
}
.navigationTitle("Testing View")
.padding(.zero)
}
}
}
struct CustomRow: View {
var title: String = ""
@Binding var value: String
var body: some View {
VStack(alignment: .leading) {
Text(title)
.font(.system(.headline, design: .rounded))
.foregroundColor(.gray)
.listRowSeparator(.hidden)
ZStack {
TextEditor(text: $value)
.padding(4)
.autocapitalization(.none)
.disableAutocorrection(true)
.textFieldStyle(.roundedBorder)
.font(.system(.body, design: .rounded))
.frame(minHeight: 50, maxHeight: 200)
}
.overlay(
RoundedRectangle(cornerRadius: 4)
.stroke(.gray, lineWidth: 1)
)
}
.padding(.bottom, 10)
}
}
struct TestingView_Previews: PreviewProvider {
static var previews: some View {
TestingView()
}
}
请注意,我已将示例代码中的HTML转义字符("
)替换为双引号("
)以正确显示代码。如果你遇到高度变化的问题,可能需要检查其他与此代码相关的部分,或者尝试更改TextEditor的样式和布局设置。
英文:
I have a problem. I have a view with several TextEditors. Typing in any of them changes the height of all of them.
Do you have any idea what happens and how to fix it?
Example Code:
import SwiftUI
struct TestingView: View {
@State var optionA = ""
@State var optionB = ""
@State private var comment = ""
var body: some View {
NavigationStack {
Form {
VStack() {
CustomRow(title: "Option A", value: $optionA)
CustomRow(title: "Option B", value: $optionB)
}
.padding(.vertical, 20)
}
.navigationTitle("Testing View")
.padding(.zero)
}
}
}
struct CustomRow: View {
var title: String = ""
@Binding var value: String
var body: some View {
VStack(alignment: .leading) {
Text(title)
.font(.system(.headline, design: .rounded))
.foregroundColor(.gray)
.listRowSeparator(.hidden)
ZStack {
TextEditor(text: $value)
.padding(4)
.autocapitalization(.none)
.disableAutocorrection(true)
.textFieldStyle(.roundedBorder)
.font(.system(.body, design: .rounded))
.frame(minHeight: 50, maxHeight: 200)
}
.overlay(
RoundedRectangle(cornerRadius: 4)
.stroke(.gray, lineWidth: 1)
)
}
.padding(.bottom, 10)
}
}
struct TestingView_Previews: PreviewProvider {
static var previews: some View {
TestingView()
}
}
答案1
得分: 1
我认为这是因为VStack
尝试通过在垂直轴上均匀分布视图来进行布局,只要可能的话。由于您为文本编辑器提供了在50和200之间的灵活高度,它们可以被拉伸,以使两个文本编辑器的高度相等。
经过试验,您可以通过在VStack
上添加垂直的fixedSize
来修复这个问题:
VStack() {
CustomRow(title: "Option A", value: $optionA)
CustomRow(title: "Option B", value: $optionB)
}
.padding(.vertical, 20)
.fixedSize(horizontal: false, vertical: true)
但我会将其视为两个单独的表单行,并隐藏列表分隔符。如果您想要垂直填充,请分别添加到每个CustomRow
:
Form {
Group {
CustomRow(title: "Option A", value: $optionA)
.padding(.top, 20)
CustomRow(title: "Option B", value: $optionB)
.padding(.bottom, 20)
}
.listRowSeparator(.hidden)
}
.navigationTitle("Testing View")
.padding(.zero)
请注意,我保留了代码部分的原文。
英文:
I think this is because VStack
s try to layout its views by distributing them equally along the vertical axis, whenever it can. Since you gave the text editors a flexible height between 50 and 200, they can be stretched so that both text editors are equally tall.
From trial and error, you can fix this by adding a vertical fixedSize
to the VStack
:
VStack() {
CustomRow(title: "Option A", value: $optionA)
CustomRow(title: "Option B", value: $optionB)
}
.padding(.vertical, 20)
.fixedSize(horizontal: false, vertical: true)
But I would just do this as two separate rows of the form, and hide the list separator. If you want the vertical padding, add them separately to each CustomRow
:
Form {
Group {
CustomRow(title: "Option A", value: $optionA)
.padding(.top, 20)
CustomRow(title: "Option B", value: $optionB)
.padding(.bottom, 20)
}
.listRowSeparator(.hidden)
}
.navigationTitle("Testing View")
.padding(.zero)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论