如何在SwiftUI中创建按固定文本行数自适应宽度的矩形（类UIKit Wrap Content）

要实现蓝色矩形根据指定行数的文本自动调整宽度（直到触达屏幕边缘），核心是让文本先按固定行数布局，再让容器适配文本尺寸，同时限制最大宽度。以下是修改后的实现：

import SwiftUI

struct ContentView: View {
    // 定义固定行数，可按需修改
    let fixedLineCount = 2
    
    var body: some View {
        VStack {
            ZStack(alignment: .center) {
                // 阴影背景矩形，跟随蓝色矩形尺寸联动
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 20)
                    .padding(12)
                    .shadow(color: .gray, radius: 24, x: 0, y: 100)
                    .alignmentGuide(.top) { $0[.top] - 12 } // 对齐蓝色矩形顶部
                
                // 蓝色容器矩形，自适应文本宽度且最大到屏幕边缘
                Rectangle()
                    .fill(Color.blue)
                    .cornerRadius(20)
                    .frame(maxWidth: .infinity)
                    .background(
                        // 用透明文本确定容器最小宽度
                        Text("This is some text that will wrap to the fixed number of lines we set")
                            .foregroundColor(.clear)
                            .multilineTextAlignment(.center)
                            .padding()
                            .lineLimit(fixedLineCount)
                            .fixedSize(horizontal: false, vertical: true)
                    )
                
                // 显示的正文文本，和背景文本配置保持一致
                Text("This is some text that will wrap to the fixed number of lines we set")
                    .foregroundColor(.white)
                    .multilineTextAlignment(.center)
                    .padding()
                    .lineLimit(fixedLineCount)
                    .fixedSize(horizontal: false, vertical: true)
            }
        }
        .padding(20)
    }
}

#Preview {
    ContentView()
}

关键改动说明： #

• 固定行数控制：给Text添加lineLimit(fixedLineCount)明确显示行数，配合fixedSize(horizontal: false, vertical: true)让文本垂直方向固定行数、水平方向自动扩展容纳内容。
• 矩形宽度适配：蓝色矩形用frame(maxWidth: .infinity)确保最大宽度触达屏幕边缘，同时通过背景里的透明文本确定最小宽度——矩形会刚好包裹指定行数的文本，文本越长宽度越宽，直到触达屏幕边界。
• 阴影矩形对齐：通过alignmentGuide调整阴影矩形的位置，让它始终和蓝色矩形顶部对齐，保持视觉统一。

你可以修改fixedLineCount的值（比如改成4），测试不同行数下的宽度适配效果。

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