SwiftUI for MacOS 中的多行 TextField/TextEditor 表单

Question

我需要一个适用于 MacOS 的 SwiftUI 多行文本输入控件，满足以下要求：

• 允许像在编辑器中一样进行光标控制（即按 RETURN 会导致换行）
• 表单中的工作标签

我尝试使用带有 lineLimit() 修饰符的 TextField，它看起来完全符合我的需要，即标签显示正确（包括对齐），但如果它为空且 RETURN 键没有，则它只有 1 行的高度t 做我想做的事（即换行）：

struct ContentView: View {
    @State var field1 = ""
    @State var field2 = ""
    @State var notes = ""

    var body: some View {
        Form {
            TextField("Label", text: $field1)
            TextField("Long Label", text: $field2)
            TextField("Notes", text: $notes)
                .lineLimit(10)
        }
        .padding()
        .frame(height: 150)
    }
}

然后我尝试了一个 TextEditor，但这缺乏定义标签的能力。标签的位置使得 Form 元素对 MacOS 非常有用，因为它允许标签的正确对齐而没有任何黑客攻击。缺少边框样式只是一个小问题，可以使用边框样式解决：

struct ContentView: View {
    @State var field1 = ""
    @State var field2 = ""
    @State var notes = ""

    var body: some View {
        Form {
            TextField("Label", text: $field1)
            TextField("Long Label", text: $field2)
            TextEditor(text: $notes)
        }
        .padding()
        .frame(height: 150)
    }
}

我只对面向未来的干净解决方案感兴趣。如果没有，hack 必须至少非常灵活，即所有标签必须正确对齐。 workingdog 的解决方案不适合我，因为一旦标签文本发生变化，一切都会崩溃。

Answer 1

我做了一个“自定义”Form 看起来像一个真实的。

代码：

struct ContentView: View {
    @State private var field1 = ""
    @State private var field2 = ""
    @State private var notes = ""
    @State private var maxLabelWidth: CGFloat?

    var body: some View {
        VStack {
            FormItem("Label", text: $field1)
            FormItem("Long Label", text: $field2)
            FormItem("Notes", text: $notes, kind: .textEditor)
        }
        .padding()
        .onPreferenceChange(MaxWidthKey.self) { maxWidth in
            maxLabelWidth = maxWidth
        }
        .environment(\.maxLabelWidth, maxLabelWidth)
    }
}

struct MaxWidthKey: PreferenceKey {
    static let defaultValue: CGFloat = 0

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

struct MaxLabelWidthKey: EnvironmentKey {
    static let defaultValue: CGFloat? = nil
}

extension EnvironmentValues {
    var maxLabelWidth: CGFloat? {
        get { self[MaxLabelWidthKey.self] }
        set { self[MaxLabelWidthKey.self] = newValue }
    }
}

struct FormItem: View {
    enum Kind {
        case textEditor
        case textField
    }

    @Environment(\.maxLabelWidth) private var maxLabelWidth
    @Binding private var text: String
    private let title: String
    private let kind: Kind

    init(_ title: String, text: Binding<String>, kind: Kind = .textField) {
        _text = text
        self.title = title
        self.kind = kind
    }

    var body: some View {
        HStack(alignment: .top) {
            Text(title)
                .foregroundColor(Color(NSColor.labelColor))
                .frame(maxWidth: maxLabelWidth, alignment: .trailing)
                .background(
                    GeometryReader { geo in
                        Color.clear.preference(
                            key: MaxWidthKey.self,
                            value: geo.size.width
                        )
                    }
                )
                .padding(.top, 3)

            switch kind {
            case .textEditor:
                TextEditor(text: $text)
                    .font(.system(size: 13))
                    .padding(.top, 3)
            case .textField:
                TextField("", text: $text)
            }
        }
    }
}

结果：

虽然它没有设置TextEditor 背景，但它可能与您所获得的一样接近。

Answer 2

这种方法怎么样（根据您的需要调整）：

struct ContentView: View {
    @State var field1 = ""
    @State var field2 = ""
    @State var notes = ""
    
    var body: some View {
        VStack (alignment: .leading, spacing: 20) {
            Form {
                TextField("Label", text: $field1)
                TextField("Long Label", text: $field2)
            }
            HStack (alignment: .top) {
                Spacer().frame(width: 30)
                Text("Notes")
                TextEditor(text: $notes).frame(height: 200)
            }
        }
        .padding()
        .frame(height: 400)
    }
}

Answer 3

我个人更喜欢在这种情况下将相同的视图与overlay 放在一起，如下所示：

Form {
    TextField("Label", text: $field1)
    TextField("Long Label", text: $field2)
    TextEditor(text: $notes)
        .overlay(
            TextEditor(text: .constant("label"))
                .allowsHitTesting(false)
                .opacity(notes.isEmpty ? 1 : 0)
        )
}

缺点是TextEditor 不像大多数其他 SwiftUI 视图那样工作：它自己绘制默认背景。您可以使用this hack 使光标通过叠加层可见，并自己在主TextEditor 上绘制背景。