所有TextEditor都会在任何TextEditor有多于一行的情况下调整大小。

huangapple go评论70阅读模式
英文:

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 VStacks 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)

huangapple
  • 本文由 发表于 2023年6月5日 16:05:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/76404537.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定