Swift中如何保持UITextView内HTML内容的缩进格式？

嘿，我知道你现在被UITextView里的子列表缩进问题搞得头大——明明加了CSS样式，Swift代码也调了段落设置，结果嵌套列表还是没法正常显示层级。别着急，咱们一步步来搞定它！

问题根源分析 #

你遇到的核心问题有两个：

1. Swift代码覆盖了HTML生成的段落样式：原来的代码里把自定义的paragraphStyle直接应用到了整个富文本字符串上，这会把HTML解析出来的列表缩进样式完全覆盖掉，导致子列表没法正确缩进。
2. UITextView对HTML/CSS的支持有限：Web端常用的一些CSS属性在iOS的UITextView里可能不生效，比如你设置的padding-left对嵌套列表的支持就不稳定。

具体解决方案 #

1. 修改Swift代码：保留原生段落样式，局部调整

我们不再全局替换段落样式，而是在HTML解析生成的原有段落样式基础上，只修改我们需要的属性（比如对齐方式、颜色），同时设置合适的tab停顿点来支持嵌套缩进。

修改后的代码：

extension NSAttributedString {
    convenience public init?(styled: String, textAlignment: NSTextAlignment = .center, color: UIColor = .black) {
        guard let data = styled.data(using: .unicode) else { return nil }
        do {
            let mutableString = try NSMutableAttributedString(
                data: data,
                options: [.documentType: NSAttributedString.DocumentType.html],
                documentAttributes: nil
            )
            
            // 遍历每个段落，在原有样式基础上修改，不覆盖列表的原生缩进
            mutableString.enumerateAttribute(.paragraphStyle, in: NSRange(location: 0, length: mutableString.length)) { value, range, _ in
                if let existingStyle = value as? NSParagraphStyle {
                    let newStyle = existingStyle.mutableCopy() as! NSMutableParagraphStyle
                    newStyle.alignment = textAlignment
                    // 设置多层tab停顿点，对应不同层级的嵌套列表
                    newStyle.tabStops = [
                        NSTextTab(textAlignment: .natural, location: 20),
                        NSTextTab(textAlignment: .natural, location: 40),
                        NSTextTab(textAlignment: .natural, location: 60)
                    ]
                    mutableString.addAttribute(.paragraphStyle, value: newStyle, range: range)
                }
            }
            
            // 统一设置文字颜色
            mutableString.addAttribute(.foregroundColor, value: color, range: NSRange(location: 0, length: mutableString.length))
            
            self.init(attributedString: mutableString.removingTrailingNewLine)
        } catch {
            return nil
        }
    }
}

2. 优化HTML的CSS：适配UITextView的特性

调整CSS样式，用UITextView支持更好的属性来实现缩进，同时给嵌套列表设置明确的层级间距：

修改后的HTML：

<html>
<head>
<style type="text/css">
body {
    font-size: 14px;
    font-family: -apple-system, Arial, sans-serif;
    color: black;
    margin-bottom: 0px;
    padding-bottom: 0px;
    line-height: 20px;
    margin: 0;
    padding: 0;
}
ul, ol {
    margin-left: 20px; /* 用margin-left替代padding-left，iOS支持更稳定 */
    padding-left: 0;
}
ul ul, ol ol, ul ol, ol ul {
    margin-left: 20px; /* 嵌套列表再增加20px缩进，实现层级感 */
}
li {
    margin: 4px 0; /* 增加列表项上下间距，提升可读性 */
}
</style>
</head>
<body>
<p>Professionals are often vastly more comfortable solving analytical, convergent problems than those requiring more divergent thinking. In this article, Olivier Leclerc and Mihnea Moldoveanu share some strategies for stimulating truly novel thinking. They introduce five "flexons," which can be thought of as "languages" for shaping problems that help you bring diverse perspectives to problem solving:</p>
<ul>
    <li>Networks</li>
    <li>Evolutionary</li>
</ul>
<ol>
    <li>Decision-agent</li>
    <li>System dynamics</li>
    <li>Information-processing : 
        <ol>
            <li>Decision-agent</li>
            <li>System dynamics</li>
            <li>Information-processing</li>
        </ol>
    </li>
</ol>
<ul>
    <li>Networks : 
        <ul>
            <li>Decision-agent</li>
            <li>System dynamics</li>
        </ul>
    </li>
</ul>
</body>
</html>

为什么这样改能生效？ #

• 保留原生段落样式：通过遍历修改每个段落的样式，我们没有破坏HTML解析出来的列表缩进结构，只是补充了对齐方式和tab停顿点。
• 适配iOS的CSS支持：用margin-left实现缩进比padding-left更可靠，同时给嵌套列表设置额外的margin，确保子列表能明显区分层级。
• 多tab停顿点：设置不同位置的tabStops，让嵌套列表的项目符号能正确对齐到对应的缩进位置。

额外注意点 #

UITextView对HTML和CSS的支持和Web浏览器不一样，很多高级CSS属性（比如自定义项目符号样式）可能没法生效。如果需要更复杂的列表样式，可能需要考虑用原生的UITableView来实现，或者自定义富文本的绘制逻辑。

内容的提问来源于stack exchange，提问作者Zubair