[英]Size a UILabel in SwiftUI via UIViewRepresentable like Text to wrap multiple lines
目标是让通过UIViewRepresentable
集成的UILabel
的大小与Text
的大小相同——使用可用宽度并换行到多行以适合所有文本,从而增加它所在的HStack
的高度,而不是无限扩展宽度。 这与这个问题非常相似,尽管接受的答案不适用于我正在使用的涉及ScrollView
、 VStack
和HStack
的布局。
struct ContentView: View {
var body: some View {
ScrollView {
VStack {
HStack {
Text("Hello, World")
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor justo quam, quis suscipit leo sollicitudin vel.")
//LabelView(text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor justo quam, quis suscipit leo sollicitudin vel.")
}
HStack {
Text("Hello, World")
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempor justo quam, quis suscipit leo sollicitudin vel.")
}
Spacer()
}
}
}
}
struct LabelView: UIViewRepresentable {
var text: String
func makeUIView(context: UIViewRepresentableContext<LabelView>) -> UILabel {
let label = UILabel()
label.text = text
label.numberOfLines = 0
return label
}
func updateUIView(_ uiView: UILabel, context: UIViewRepresentableContext<LabelView>) {
uiView.text = text
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
使用 Text 和 LabelView 会导致这种不需要的布局:
如果您将LabelView
包装在GeometryReader
中并将width
传递给LabelView
以设置preferredMaxLayoutWidth
,由于某种原因它是0.0
。 如果将GeometryReader
移到ScrollView
之外,您可以获得一个宽度,但它是滚动视图宽度,而不是 SwiftUI 为HStack
中的LabelView
建议的宽度。
相反,如果我指定label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
它工作得更好,但仍然不显示所有文本,它奇怪地截断了 3 行的LabelView
和 2 行的第二个Text
。
这里的问题在于ScrollView
需要确定的高度,但表示不提供它。 可能的解决方案是动态计算换行文本高度并明确指定它。
注意:由于高度是动态计算的,它仅在运行时可用,因此无法使用预览进行测试。
用 Xcode 12 / iOS 14 测试
struct LabelView: View {
var text: String
@State private var height: CGFloat = .zero
var body: some View {
InternalLabelView(text: text, dynamicHeight: $height)
.frame(minHeight: height)
}
struct InternalLabelView: UIViewRepresentable {
var text: String
@Binding var dynamicHeight: CGFloat
func makeUIView(context: Context) -> UILabel {
let label = UILabel()
label.numberOfLines = 0
label.lineBreakMode = .byWordWrapping
label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
return label
}
func updateUIView(_ uiView: UILabel, context: Context) {
uiView.text = text
DispatchQueue.main.async {
dynamicHeight = uiView.sizeThatFits(CGSize(width: uiView.bounds.width, height: CGFloat.greatestFiniteMagnitude)).height
}
}
}
}
这不是一个具体的答案。
我偶然发现固定大小修饰符可以帮助将 UILabel 自动调整为其内容大小。
struct ContentView: View {
let attributedString: NSAttributedString
var body: some View {
ScrollView {
LazyVStack(spacing: 10) {
RepresentedUILabelView(attributedText: attributedString)
.frame(maxHeight: 300)
.fixedSize(horizontal: false, vertical: true)
.background(Color.orange.opacity(0.5))
}
.padding()
}
}
}
struct RepresentedUILabelView: UIViewRepresentable {
typealias UIViewType = UILabel
var attributedText: NSAttributedString
func makeUIView(context: Context) -> UILabel {
let label = UILabel()
label.numberOfLines = 0
label.lineBreakMode = .byTruncatingTail
label.textAlignment = .justified
label.allowsDefaultTighteningForTruncation = true
// Compression resistance is important to enable auto resizing of this view,
// that base on the SwiftUI layout.
// Especially when the SwiftUI frame modifier applied to this view.
label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
label.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
// Maybe this is not necessary.
label.clipsToBounds = true
return label
}
func updateUIView(_ uiView: UILabel, context: Context) {
print(#fileID, #function)
uiView.attributedText = attributedText
}
}
演示:
此外,如果您不想提供最大高度。 您可以将preferredMaxLayoutWidth
设置为您的屏幕宽度。 如果你把它放在 updateUIView 方法中,每当屏幕方向改变时,这个方法也会被调用。
func updateUIView(_ uiView: UILabel, context: Context) {
uiView.attributedText = attributedText
uiView.preferredMaxLayoutWidth = 0.9 * UIScreen.main.bounds.width
}
为了完整起见,这是我用来测试视图的属性文本设置。 但是,它不应该影响视图调整大小的工作方式。
func makeAttributedString(fromString s: String) -> NSAttributedString {
let content = NSMutableAttributedString(string: s)
let paraStyle = NSMutableParagraphStyle()
paraStyle.alignment = .justified
paraStyle.lineHeightMultiple = 1.25
paraStyle.lineBreakMode = .byTruncatingTail
paraStyle.hyphenationFactor = 1.0
content.addAttribute(.paragraphStyle,
value: paraStyle,
range: NSMakeRange(0, s.count))
// First letter/word
content.addAttributes([
.font : UIFont.systemFont(ofSize: 40, weight: .bold),
.expansion : 0,
.kern : -0.2
], range: NSMakeRange(0, 1))
return content
}
let coupleWords = "Hello, world!"
let multilineEN = """
Went to the woods because I wished to live deliberately, to front only the essential facts of life, and see if I could not learn what it had to teach, and not, when I came to die, discover that I had not lived. I did not wish to live what was not life, living is so dear! Nor did I wish to practise resignation, unless it was quite necessary?"
I went to the woods because I wished to live deliberately, to front only the essential facts of life, and see if I could.
I went to the woods because I wished to live deliberately, to front only the essential facts of life, and see if I could not learn what it had to teach, and not.
"""
问题在于 label 的宽度限制。无需修改内容抗压缩性或其他 label 设置。 只需设置preferredMaxLayoutWidth
值:
public struct AttributedText: UIViewRepresentable {
public func makeUIView(context: Context) -> UIViewType {
let label = UIViewType()
label.numberOfLines = 0
label.lineBreakMode = .byWordWrapping
label.attributedText = attributedText
label.preferredMaxLayoutWidth = width
label.textAlignment = .left
return label
}
public func updateUIView(_ uiView: UIViewType, context: Context) {
}
public typealias UIViewType = UILabel
public let attributedText: String
public let width: CGFloat
public init(attributedText: String, width: CGFloat) {
self.attributedText = attributedText
self.width = width
}
}
用法:
AttributedLabel(
attributedText: someAttributedText,
width: UIScreen.main.bounds.width - 80
).padding(.bottom, -20)
您可以使用GeometryReader
或使用UIScreen.main.bounds.width
提供。 但是底部有一些额外的填充。 这就是为什么我使用了一些负底部填充:
当前答案中没有一个解决方案与 SwiftUI 的本质足够接近。 另一种思路,既然 SwiftUI 对 Text 来说已经足够好了,为什么不做这样的事情呢?
Text(yourstr)
.foregroundColor(.clear) <<<<<<<--------👈
.multilineTextAlignment(.leading)
.frame(maxWidth:.infinity,maxHeight: .infinity, alignment: .leading)
.overlay(
Your ActiveLabelStack() <<<<<<<--------👈
,alignment: .center
)
简单地说,让文字告诉你高度,是Label的底。 毕竟Text是SwiftUI的儿子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.