SwiftUI 文本编辑器如何跟踪编辑器中的行数

Question

我有一个使用 SwiftUI 3.0 的 TextEditor，每次创建新行时我都想将编辑器高度增加大约 16 点。我遇到的问题是我的代码无法识别正在形成的新行。行数保持在 1，编辑器不展开。我已经查看了几个示例，但没有得到它的工作。任何建议都会很棒。下面的代码是完整的代码。

import SwiftUI

struct CommentTestView: View {
    @State var Posting = ""
    @State var height: CGFloat = 30
    
    var body: some View {
        VStack {
            Spacer()
            ZStack(alignment: .topLeading) {
                        Text("Placeholder")
                            .foregroundColor(.gray)
                            .font(Font.custom("Helvetica Neue", size: 13.5))
                            .padding(.horizontal, 4)
                            .padding(.vertical, 9)
                            .opacity(Posting.isEmpty ? 1 : 0)

                        TextEditor(text: $Posting)
                            .foregroundColor(.black)
                            .font(Font.custom("Helvetica Neue", size: 14))
                            .frame(height: height)
                            .opacity(Posting.isEmpty ? 0.25 : 1)
                            .onChange(of: self.Posting, perform: { value in
                                withAnimation(.easeInOut(duration: 0.1), {
                                    print("test line number: \( value.numberOfLines())" )
                                    let LineCount: CGFloat = CGFloat(value.numberOfLines())
                                    if value.numberOfLines() == 0 || value.isEmpty {
                                        // initial height
                                        height = 35
                                    } else {
                                        height = 16 * LineCount
                                    }
                                })
                            })
                    }
                    .padding(4)
                    .overlay(
                        RoundedRectangle(cornerRadius: 8)
                            .stroke(Color.gray, lineWidth: 0.5)
                    )
                }
        }
    }


struct CommentTestView_Previews: PreviewProvider {
    var hhh = TimeLineInsertions()
    static var previews: some View {
        CommentTestView()
    }
}

extension String {
    func numberOfLines() -> Int {
        return self.numberOfOccurrencesOf(string: "\n") + 1
    }

    func numberOfOccurrencesOf(string: String) -> Int {
        return self.components(separatedBy:string).count - 1
    }

}

Answer 1

我让它运行得很顺利，我只需要做一些改变。通过下面的更改，我只跟踪文本的大小而不是行数，并相应地更新 TextEditor。对于行数，它仅在我按下 enter 时有效。

struct CommentVTestView: View {
    @State var Posting = ""
    @State var height: CGFloat = 30.0
    var body: some View {
        VStack(alignment: .leading) {
            
            TextEditor(text: $Posting)
                .foregroundColor(.black)
                .font(Font.custom("Helvetica Neue", size: 15))
                .border(Color.gray)
                .padding([.bottom], 5)
                   .foregroundColor(.secondary)
                   .cornerRadius(3)
                .frame(width: 200, height: height)

            

                Text(Posting)
                    .foregroundColor(.red)
                    .frame(width: 190)
                    .hidden()
                    .font(Font.custom("Helvetica Neue", size: 15))
                    .fixedSize(horizontal: false, vertical: true)
                    .background(GeometryReader { proxy in
                        Color.clear
                            .onChange(of: self.Posting, perform: { value in
                                if proxy.size.height > height {
                                    height = proxy.size.height + 17.0
                                }
                            })
                        
                    })
            
            
        }
    }
}

SwiftUI 文本编辑器如何跟踪编辑器中的行数

SwiftUI Text Editor how can I keep track of the number of lines in the editor

swift

swiftui

swiftui-texteditor