SwiftUI聊天界面Text仅显示前两行问题求助

我正在开发一款将集成ChatGPT API的聊天机器人，目前正在构建聊天交互模块。我可以在TextField中输入内容并添加至数组，随后通过Text组件展示，但输入长文本时，Text仅显示前两行后就出现省略号。我已尝试使用lineLimit属性但未生效，请问如何实现Text组件完整显示全部长文本内容？

import SwiftUI

struct writtenpromptView: View {
    
    @State private var Prompt: String = ""

    @State var chatarray: [String] = ["Hello", "hello"]
    @State var aiarray: [String] = ["good question", "hello"]
    
    var body: some View {
        ZStack {
            Color("darkgpt")
                .edgesIgnoringSafeArea(.all)
            VStack {
                topbar()
                    .padding(.top, 35)
                    .edgesIgnoringSafeArea(.all)
                    .frame(height:45)
                    .padding(.bottom, 10)
                ScrollView {
                    ScrollViewReader { value in
                        GeometryReader { geometry in
                            VStack {
                                ForEach(0..<chatarray.count, id:\.self) { index in
                                        Rectangle()
                                        .foregroundColor(Color("darkgpt"))
                                        .frame(minWidth: geometry.size.width, maxWidth: geometry.size.width, minHeight: 50, maxHeight: 500)
                                        .overlay(Text(chatarray[index]).foregroundColor(Color("textgrey")).frame(minWidth: 50, maxWidth: geometry.size.width - 60, minHeight: 50, maxHeight: 500))
                                    
                                        Rectangle()
                                        .foregroundColor(Color("gptresponse"))
                                        .frame(minWidth: geometry.size.width, maxWidth: geometry.size.width, minHeight: 50, maxHeight: 500)
                                        .overlay(Text(aiarray[index]).foregroundColor(Color("textgrey")).frame(minWidth: 50, maxWidth: geometry.size.width - 60, minHeight: 50, maxHeight: 500)
                                        )
                                    
                                    
                                }
                            }
                        }
                    }
            }
                
                ZStack {
                    if Prompt == "" {
                        HStack {
                            TypingAnimationView(promptArray: ["Ask us anything...", "Explain quantum computing in simple terms.", "Write an essay on George Washington.", "Tell me a joke.", "write code to print \"hello World\" in python."], typingSpeed: 0.09, deletionSpeed: 0.09)
                        }
                    }
                        
                    TextField("", text: $Prompt)
                        .padding()
                        .frame(width: 300, height: 50)
                        .background(Color("textbar").opacity(0.3).cornerRadius(20))
                        .padding(.bottom, 25)
                        .foregroundColor(Color.white)
                        .font(.headline)
                        .onSubmit {
                            chatarray.append(self.Prompt)
                            aiarray.append(self.Prompt)
                            self.Prompt = ""
                        }
                }
            }
        }
    }
}

struct writtenpromptView_Previews: PreviewProvider {
    static var previews: some View {
        writtenpromptView()
    }
}

问题根源 #

1. 多层高度限制：外层Rectangle和Text组件都设置了maxHeight: 500，直接截断超出高度的文本；
2. 未显式开启无限行数：SwiftUI中Text默认支持自动换行，但未设置.lineLimit(.none)时，某些布局场景下会默认限制行数；
3. GeometryReader布局冲突：它会强制子视图占满ScrollView的可视空间，导致文本无法通过滚动显示全部内容。

修复步骤 #

1. 移除GeometryReader #

删除ScrollViewReader内的GeometryReader，直接让VStack自适应内容高度，避免布局空间被强制限制。

2. 调整消息容器的frame #

去掉Rectangle的maxHeight限制，只保留minHeight: 50保证消息有最小展示高度，同时设置maxWidth: .infinity让容器铺满屏幕宽度。

3. 配置Text组件 #

• 添加.lineLimit(.none)明确允许无限行数；
• 移除Text自身的固定frame限制，改用.padding(.horizontal, 30)控制左右边距，让文本自适应宽度；
• 添加.multilineTextAlignment(.leading)确保文本左对齐，提升可读性。

修复后的核心代码 #

ScrollView {
    ScrollViewReader { value in
        VStack(spacing: 0) {
            ForEach(0..<chatarray.count, id:\.self) { index in
                // 用户消息
                Rectangle()
                    .foregroundColor(Color("darkgpt"))
                    .frame(minWidth: UIScreen.main.bounds.width, maxWidth: .infinity, minHeight: 50)
                    .overlay(
                        Text(chatarray[index])
                            .foregroundColor(Color("textgrey"))
                            .padding(.horizontal, 30)
                            .lineLimit(.none)
                            .multilineTextAlignment(.leading)
                    )
                
                // AI消息
                Rectangle()
                    .foregroundColor(Color("gptresponse"))
                    .frame(minWidth: UIScreen.main.bounds.width, maxWidth: .infinity, minHeight: 50)
                    .overlay(
                        Text(aiarray[index])
                            .foregroundColor(Color("textgrey"))
                            .padding(.horizontal, 30)
                            .lineLimit(.none)
                            .multilineTextAlignment(.leading)
                    )
            }
        }
    }
}

额外优化建议 #

• 使用UIScreen.main.bounds.width获取屏幕宽度，替代GeometryReader的宽度计算，避免布局冲突；
• 给VStack设置spacing: 0，让消息容器紧密贴合，消除不必要的空隙；
• 若需要消息自动滚动到底部，可以在添加新消息后调用value.scrollTo(chatarray.count-1)实现。

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