Swift技术问询：如何创建跨视图宽度的彩色块背景文本

我之前也踩过NSAttributedString背景色的坑！它的背景色确实只会贴合文本内容的宽度，没法直接撑满整个视图。要实现你说的「每个段落是彩色块、块间有白色间隔」的效果，得换个思路——用容器视图承载文本，把背景色给容器，而不是靠NSAttributedString。下面给你两种常用的实现方案：

方案1：用UITableView（适合多段落列表） #

如果你的内容是多个独立段落，用UITableView是最方便的，每个Cell对应一个彩色段落，Cell之间的间距就是天然的白色间隔：

步骤1：自定义段落Cell #

class ColoredParagraphCell: UITableViewCell {
    // 用于显示文本的Label
    let textLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.textColor = .white // 文本用白色，和彩色背景对比
        label.font = .systemFont(ofSize: 16)
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupCell()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupCell() {
        // 让Cell本身透明，用contentView做彩色背景
        backgroundColor = .clear
        contentView.backgroundColor = .systemBlue // 默认背景色，后续动态修改
        contentView.layer.cornerRadius = 8 // 可选：给背景块加圆角更美观
        
        // 添加Label并设置约束（上下左右留边，避免文本贴在背景边缘）
        contentView.addSubview(textLabel)
        NSLayoutConstraint.activate([
            textLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            textLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            textLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 12),
            textLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -12)
        ])
        
        // 设置Cell的内边距，实现段落间的白色间隔
        contentView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            contentView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 16),
            contentView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -16),
            contentView.topAnchor.constraint(equalTo: self.topAnchor, constant: 8),
            contentView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -8)
        ])
    }
}

步骤2：在ViewController中配置TableView #

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    let tableView = UITableView()
    // 模拟段落数据：文本+对应背景色
    let paragraphs: [(text: String, color: UIColor)] = [
        ("这是第一个彩色段落，背景色是蓝色。NSAttributedString没法撑满宽度，但用Cell就能轻松实现跨视图的背景块。", .systemBlue),
        ("这是第二个彩色段落，背景色是绿色。每个段落之间的白色间隔来自Cell的内边距，视觉上很清晰。", .systemGreen),
        ("这是第三个彩色段落，背景色是橙色。如果需要富文本，直接给Label设置NSAttributedString就行，完全不影响背景效果。", .systemOrange)
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
    }
    
    private func setupTableView() {
        tableView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(tableView)
        
        // 注册自定义Cell
        tableView.register(ColoredParagraphCell.self, forCellReuseIdentifier: "ColoredParagraphCell")
        tableView.dataSource = self
        tableView.delegate = self
        tableView.separatorStyle = .none // 隐藏默认分隔线
        tableView.rowHeight = UITableView.automaticDimension // 自动计算Cell高度
        tableView.estimatedRowHeight = 100 // 预估高度，提升滚动性能
        
        // 设置TableView约束
        NSLayoutConstraint.activate([
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }
    
    // MARK: - UITableViewDataSource
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return paragraphs.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ColoredParagraphCell", for: indexPath) as! ColoredParagraphCell
        let paragraph = paragraphs[indexPath.row]
        cell.textLabel.text = paragraph.text
        cell.contentView.backgroundColor = paragraph.color
        return cell
    }
}

方案2：用UIStackView（适合单页面固定段落） #

如果你的段落数量固定，不需要滚动，用UIStackView更直接，每个段落放在一个带背景色的容器View里，StackView的spacing就是白色间隔：

class ViewController: UIViewController {
    // 模拟段落数据
    let paragraphs: [(text: String, color: UIColor)] = [
        ("这是第一个彩色段落，用StackView实现的背景块。", .systemPurple),
        ("这是第二个彩色段落，块间的白色间隔由StackView的spacing控制。", .systemTeal),
        ("这是第三个彩色段落，同样支持富文本内容。", .systemPink)
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupStackView()
    }
    
    private func setupStackView() {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.spacing = 16 // 段落间的白色间隔大小
        stackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stackView)
        
        // 给每个段落创建容器View和Label
        for paragraph in paragraphs {
            let containerView = UIView()
            containerView.backgroundColor = paragraph.color
            containerView.layer.cornerRadius = 8
            
            let label = UILabel()
            label.text = paragraph.text
            label.textColor = .white
            label.numberOfLines = 0
            label.font = .systemFont(ofSize: 16)
            label.translatesAutoresizingMaskIntoConstraints = false
            containerView.addSubview(label)
            
            // 设置Label的内边距
            NSLayoutConstraint.activate([
                label.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
                label.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -16),
                label.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 12),
                label.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -12)
            ])
            
            stackView.addArrangedSubview(containerView)
        }
        
        // 设置StackView的约束（左右留边，避免背景块贴屏幕边缘）
        NSLayoutConstraint.activate([
            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
            stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20)
        ])
    }
}

关键说明 #

为什么NSAttributedString做不到？因为它的NSAttributedString.Key.backgroundColor是基于文本的bounding rect绘制的，只会覆盖文本实际占据的区域，无法扩展到整个视图宽度。而用容器View做背景，就能轻松让彩色块撑满你想要的宽度，同时通过Cell内边距或StackView的spacing实现白色间隔。

如果需要富文本（比如部分文本加粗、变色），直接给UILabel设置attributedText就行，完全不影响背景块的效果哦！

内容的提问来源于stack exchange，提问作者A.Zada