Flutter带空格文本背景色不覆盖空格区域的修复方案咨询

在Flutter中，当给Text组件设置backgroundColor样式时，普通空格（ ）不会被背景色覆盖，仅会占据宽度。以下是几种可行的解决办法：

• 替换普通空格为非断行空格
  将文本中的普通空格替换为Unicode非断行空格（\u00A0），这类空格会被Text组件的背景样式正常覆盖。示例代码：

  Text(
    "Hello\u00A0\u00A0\u00A0World",
    style: TextStyle(
      backgroundColor: Colors.red,
      color: Colors.white,
      fontSize: 20,
    ),
  )
  

• 使用RichText拆分字符逐个设置样式
  通过RichText将文本拆分为单个字符，每个字符都应用带背景色的TextSpan，确保包括空格在内的所有字符都被背景色覆盖。示例代码：

  RichText(
    text: TextSpan(
      style: TextStyle(fontSize: 20),
      children: "Hello   World".split('').map((char) {
        return TextSpan(
          text: char,
          style: TextStyle(
            backgroundColor: Colors.red,
            color: Colors.white,
          ),
        );
      }).toList(),
    ),
  )
  

• 使用Container包裹实现整体背景
  如果不需要针对文本内容的局部背景，而是希望整个文本所在区域都有背景，可以用Container包裹Text，通过Container的color属性设置背景。示例代码：

  Container(
    color: Colors.red,
    padding: EdgeInsets.symmetric(horizontal: 4),
    child: Text(
      "Hello   World",
      style: TextStyle(
        color: Colors.white,
        fontSize: 20,
      ),
    ),
  )
  

内容的提问来源于stack exchange，提问作者Cristian E.