SwiftUI自定义Banner多行文本显示异常，求自动换行解决方案

问题根源 #

你的Banner文本被固定显示为3行，通常是因为代码中给Text组件设置了固定的lineLimit(3)，或者Banner容器未配置合适的宽度约束，导致文本无法根据容器宽度自动换行。

修复步骤及代码示例 #

1. 移除Text的固定行数限制
   确保Text不被限制固定行数，添加fixedSize(horizontal: false, vertical: true)允许文本垂直方向自适应高度：

// 原错误写法
Text(bannerMessage)
    .lineLimit(3) // 强制限制为3行导致异常

// 修改后写法
Text(bannerMessage)
    .fixedSize(horizontal: false, vertical: true)
    // 无需设置lineLimit，默认支持自动换行；若之前有设置，改为lineLimit(nil)

2. 给Banner容器添加宽度约束
   让Banner外层容器占满父视图宽度，为文本提供足够的换行空间：

struct BannerModifier: ViewModifier {
    let isPresented: Bool
    let message: String

    func body(content: Content) -> some View {
        ZStack(alignment: .top) {
            content
            if isPresented {
                HStack(alignment: .top, spacing: 8) {
                    // Banner图标或其他元素
                    Image(systemName: "exclamationmark.triangle")
                        .foregroundColor(.white)
                    Text(message)
                        .foregroundColor(.white)
                        .fixedSize(horizontal: false, vertical: true)
                }
                .padding()
                .background(Color.orange)
                .frame(maxWidth: .infinity) // 占满父容器宽度
                .transition(.move(edge: .top))
                .animation(.easeInOut, value: isPresented)
            }
        }
    }
}

3. 调整预览布局
   预览时给父视图设置真实场景的宽度，确保效果符合预期：

struct BannerModifier_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            Spacer()
            Text("主内容区域")
        }
        .modifier(BannerModifier(
            isPresented: .constant(true),
            message: "这是一段很长的测试文本，需要实现自动换行的连续显示效果，而不是被强制截断成固定的3行"
        ))
        .frame(width: UIScreen.main.bounds.width)
    }
}

关键说明 #

• fixedSize(horizontal: false, vertical: true)：允许文本在水平方向自动换行，垂直方向根据内容高度自适应
• frame(maxWidth: .infinity)：让Banner容器铺满父视图宽度，确保文本有足够的换行空间
• 除非需要限制最大行数，否则避免使用lineLimit(_:)设置固定数值

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