SwiftUI中如何让TextField与Text组件实现多行换行？

没问题！在SwiftUI里完全可以实现Text和TextField的换行显示，我来帮你逐个解决：

一、让Text组件自动换行 #

你的Text组件之所以没换行，大概率是因为外层容器没有给它足够的横向空间来折行。SwiftUI的Text默认是支持多行显示的，但如果父布局的宽度被约束（比如嵌套在某个固定宽度的容器里），它就没法自动折行。

你可以给Text或者外层的VStack添加frame(maxWidth: .infinity)，让它占据可用的横向空间，同时保持左对齐：

VStack(alignment: .leading) {
    Text(message.message)
        .bold()
        .foregroundColor(.black)
        .frame(maxWidth: .infinity, alignment: .leading) // 让Text占满可用宽度，自动折行
    Text(self.dateString)
        .font(.caption)
        .foregroundColor(.gray)
}
.frame(maxWidth: .infinity, alignment: .leading) // 也可以给外层VStack设置，确保整体有足够宽度

另外补充两点：

• 如果你的文本里包含手动换行符（\n），Text会自动识别并换行；
• 如果你之前给Text设置过lineLimit(1)，记得去掉或者改成lineLimit(nil)，这样才允许显示多行。

二、让TextField支持多行输入 #

默认的TextField是单行的，要实现多行输入，需要根据你的iOS版本选择对应的方案：

方案1：iOS 16+ 推荐用法 #

iOS 16及以上的TextField新增了axis参数，指定为.vertical后，它会自动根据输入内容扩展高度，支持多行输入：

HStack {
    TextField(
        "Write a message...",
        text: $messageModel.message,
        axis: .vertical // 启用垂直方向，支持多行
    )
    .background(GeometryGetter(rect: $kGuardian.rects[0]))
    .lineLimit(5...10) // 可选：限制最小5行、最大10行，也可以写lineLimit(nil)允许无限行数
    Button(action: {
        self.messageModel.to = self.user.uid
        self.messageModel.status = "read"
        self.messageModel.date = Date().timeIntervalSince1970
        ChatService.sendMessage(message: self.messageModel)
        self.messageModel.message = ""
    }) {
        Text("Send")
    }
}

方案2：iOS 15及以下版本 #

旧版本的TextField不支持多行，需要用TextEditor替代。注意TextEditor本身没有占位符，需要自己实现：

HStack {
    // 自定义带占位符的TextEditor
    ZStack(alignment: .topLeading) {
        if messageModel.message.isEmpty {
            Text("Write a message...")
                .foregroundColor(.gray)
                .padding(.horizontal, 8)
                .padding(.vertical, 12)
        }
        TextEditor(text: $messageModel.message)
            .background(GeometryGetter(rect: $kGuardian.rects[0]))
            .frame(minHeight: 40, maxHeight: 120) // 设置高度范围
            .padding(8)
    }
    
    Button(action: {
        self.messageModel.to = self.user.uid
        self.messageModel.status = "read"
        self.messageModel.date = Date().timeIntervalSince1970
        ChatService.sendMessage(message: self.messageModel)
        self.messageModel.message = ""
    }) {
        Text("Send")
    }
}

这样修改后，你的Text和输入框应该都能正常换行显示了！

内容的提问来源于stack exchange，提问作者mikeTeixeira88