UIStackView中的多行UILabel问题

基础概念

UIStackView 是 iOS 开发中用于布局的容器视图，它可以自动管理其子视图的排列方式。UILabel 是用于显示文本的视图。当在 UIStackView 中使用多行 UILabel 时，需要注意 UILabel 的 numberOfLines 属性和 lineBreakMode 属性，以确保文本能够正确显示。

类型

水平堆栈视图：子视图水平排列。
垂直堆栈视图：子视图垂直排列。

应用场景

表单布局
卡片布局
动态内容展示

常见问题及解决方法

问题1：多行 `UILabel` 文本显示不全

原因：UILabel 的 numberOfLines 属性设置为 1，或者 lineBreakMode 设置不当。

解决方法：

let label = UILabel()
label.numberOfLines = 0 // 设置为 0 表示不限制行数
label.lineBreakMode = .byWordWrapping // 按单词换行

问题2：`UIStackView` 中的 `UILabel` 文本超出边界

原因：UIStackView 的 axis 和 alignment 属性设置不当。

解决方法：

let stackView = UIStackView()
stackView.axis = .vertical // 垂直排列
stackView.alignment = .leading // 对齐方式

问题3：`UIStackView` 中的 `UILabel` 文本间距不一致

原因：UIStackView 的 spacing 属性设置不当。

解决方法：

let stackView = UIStackView()
stackView.spacing = 8 // 设置间距

示例代码

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .leading
        stackView.spacing = 8
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        let label1 = UILabel()
        label1.text = "This is a multi-line label."
        label1.numberOfLines = 0
        label1.lineBreakMode = .byWordWrapping
        
        let label2 = UILabel()
        label2.text = "Another multi-line label with more text to demonstrate the issue."
        label2.numberOfLines = 0
        label2.lineBreakMode = .byWordWrapping
        
        stackView.addArrangedSubview(label1)
        stackView.addArrangedSubview(label2)
        
        view.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
}