如何在 SwiftUI 中对文本字段的高度进行动画处理？

Question

使用下面的代码，当文本字段的行数增加且小于 5 行时，文本字段就会增长。但是 textField 的高度变化没有动画，我如何在该变化上应用动画？

struct TextClipView: View {
    @EnvironmentObject var textClipModel: TextClipModel
    private var placeholderString = "Type your text here!"
    
    var body: some View {
        GeometryReader { proxy in
            VStack(spacing: 20) {
                Spacer()
                    .frame(height: 80)
                
                TextField(placeholderString, text: $textClipModel.textClip, axis: .vertical)
                    .textFieldStyle(.roundedBorder)
                    .lineLimit(5)
                Spacer()
            }
            .frame(
                width: proxy.size.width,
                height: proxy.size.height
            )
        }
        .background(Color.green.opacity(0.2))
    }
}

Answer 1

您可以通过将

.animation

修饰符应用到文本字段来实现这一点，如下所示：

TextField(placeholderString, text: $textClipModel.textClip, axis: .vertical)
                .textFieldStyle(.roundedBorder)
                .lineLimit(5)
                .animation(.default, value: textClipModel.textClip)

通过这个小更改，您的文本字段的高度增加或减少将会有动画效果。我已经测试过了。 让我知道这是否适合您！