SwiftUI-TextField如何根据其内容动态增加其高度?

时间:2020-02-14 08:36:46

标签: ios swift swiftui

我正在尝试使用SwiftUI构建“聊天”视图,我想知道如何做才能动态增加用户应该在其中编写消息的TextField的高度。

我已经定义了一个minHeight,期望TextField可以基于其固有内容来增加其高度。

我当前的查看代码:

struct MessageSenderView: View {
    @Binding var userTextInput: String

    var body: some View {
        VStack {
            HStack(alignment: .center, spacing: 17) {
                senderPlusImage()
                ZStack {
                    Capsule()
                        .fill(Color("messagesBankDetailColor"))
                        .frame(minHeight: 34, alignment: .bottom)
                    HStack(spacing: 15){
                        Spacer()
                        ZStack(alignment: .leading) {
                            if userTextInput.isEmpty { Text(Constants.Login.Text.userPlaceHolder).foregroundColor(Color.white) }
                            TextField(" ", text: $userTextInput)
                                .multilineTextAlignment(.leading)
                                .frame(minHeight: CGFloat(34))
                                .foregroundColor(Color.white)
                                .background(Color("messagesBankDetailColor"))
                                .onAppear { self.userTextInput = "" }
                        }
                        arrowImage()
                    }
                    .frame(minHeight: CGFloat(34))
                    .padding(.trailing, 16)
                    .layoutPriority(100)
                }
            }
            .padding(16)
        }
        .background(Color("mainBackgroundColor"))
    }
}

这是它的样子:

enter image description here

谢谢!!!!

2 个答案:

答案 0 :(得分:2)

为此,您应该将UITextfield与UIViewRepresentable协议一起使用。 也许本教程可以为您提供帮助:Dynamic TextField SwiftUI

答案 1 :(得分:1)

要支持多行文字,应使用TextEditor而不是TextField

如果您希望它随着键入而增长,请在其上嵌入如下标签:

ZStack {
    TextEditor(text: $text)
    Text(text).opacity(0).padding(.all, 8) // <- This will solve the issue if it is in the same ZStack
}

演示

Demo