ios 当任何TextEditor具有多行时,将调整所有TextEditor的大小

uajslkp6  于 2023-06-07  发布在  iOS
关注(0)|答案(1)|浏览(166)

我有个问题我有几个文本编辑器的视图。输入其中任何一个都会改变所有这些元素的高度。
你知道会发生什么以及如何解决吗?

示例编码:

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()
        }
    }
s5a0g9ez

s5a0g9ez1#

我认为这是因为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)

相关问题