与SwiftUI中的文本内容相同的矩形的动态高度

基础概念

SwiftUI 是苹果公司推出的一个声明式 UI 框架，用于构建 macOS、iOS、watchOS 和 tvOS 应用程序。它允许开发者通过描述 UI 的外观和行为来创建界面，而不是通过编写大量的视图和控制器代码。

类型

SwiftUI 中有多种视图类型，包括文本视图（Text）、图像视图（Image）、列表视图（List）等。对于文本内容相同的矩形，可以使用 Text 视图来显示文本，并通过布局和样式来创建矩形效果。

应用场景

假设你正在开发一个 iOS 应用程序，需要显示一个包含动态高度文本的矩形框。这个矩形框的高度需要根据文本内容自动调整。

示例代码

以下是一个示例代码，展示了如何在 SwiftUI 中创建一个包含动态高度文本的矩形框：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.blue)
                .frame(height: textHeight)
                .overlay(
                    Text("这是一个动态高度的文本矩形框")
                        .foregroundColor(.white)
                        .padding()
                )
        }
        .frame(maxWidth: .infinity, alignment: .center)
    }
    
    var textHeight: CGFloat {
        let text = "这是一个动态高度的文本矩形框"
        let font = UIFont.systemFont(ofSize: 16)
        let textWidth = CGFloat.greatestFiniteMagnitude
        let textHeight = text.height(withConstrainedWidth: textWidth, font: font)
        return textHeight + 20 // 增加一些 padding
    }
}

extension String {
    func height(withConstrainedWidth width: CGFloat, font: UIFont) -> CGFloat {
        let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
        let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [.font: font], context: nil)
        return ceil(boundingBox.height)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

解释

RoundedRectangle：创建一个圆角矩形视图，并设置其背景颜色和圆角半径。
Text：创建一个文本视图，并设置其文本内容、颜色和内边距。
frame：设置矩形框的高度为 textHeight，这个高度是根据文本内容动态计算的。
textHeight：计算文本的高度。通过扩展 String 类，添加了一个 height(withConstrainedWidth:font:) 方法，用于计算文本在给定宽度下的高度。