如何实现随内容垂直自动扩展的自定义SwiftUI TextField？

嗨，我来帮你搞定这个问题！你已经选对了axis: .vertical这个方向，但还需要几个小调整，让TextField能真正跟着内容自动长高，就像iMessage的输入框那样～

你的核心问题在于：虽然指定了垂直方向，但默认的TextField没有明确允许它扩展高度，而且缺少对最小/最大高度的合理设置。咱们来一步步修改代码：

修改后的完整代码 #

import SwiftUI

struct CustomTextField: View {
    let title: String
    let prompt: String
    @Binding var text: String
    
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text(title)
                .font(.title3.bold())
            
            // 关键修改在这里！
            TextField(prompt, text: $text, axis: .vertical)
                .lineLimit(1...nil) // 允许从1行开始无限扩展（也可以设上限比如1...10）
                .frame(minHeight: 44) // 初始最小高度，符合iOS输入框的常规尺寸
                .padding(.horizontal, 8)
                .padding(.vertical, 6)
        }
        .padding()
        .overlay {
            RoundedRectangle(cornerRadius: 15)
                .stroke(Color.black, lineWidth: 2)
        }
    }
}

#Preview {
    CustomTextField(
        title: "Title",
        prompt: "Prompt",
        text: .constant("This is my content\nLet me add another line\nAnd one more!")
    )
    .padding()
}

关键修改点说明 #

• lineLimit(1...nil)：这个设置让TextField从1行开始，随着内容增加自动换行并扩展高度。如果你想限制最大行数，比如最多5行，可以改成lineLimit(1...5)。
• frame(minHeight: 44)：保证输入框有一个合理的初始高度，不会因为空内容变得太窄，同时允许它根据内容向上扩展高度。
• 给TextField内部加了一点内边距，让文字不会紧贴边框，体验更友好。

这样修改后，你的CustomTextField就会像iMessage的输入框一样，输入单行时保持紧凑，输入多行时自动长高，而且标题和圆角边框也会跟着整个视图一起调整大小，完全符合你的需求～

内容来源于stack exchange