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()
}
}
textHeight
,这个高度是根据文本内容动态计算的。String
类,添加了一个 height(withConstrainedWidth:font:)
方法,用于计算文本在给定宽度下的高度。通过这种方式,你可以创建一个包含动态高度文本的矩形框,并且可以根据需要调整文本和样式。
领取专属 10元无门槛券
手把手带您无忧上云