Flutter：如何让TextSpan的backgroundColor铺满并添加换行分割线？

1. 背景色无法铺满行宽 #

TextSpan自带的backgroundColor仅覆盖文本自身区域，无法撑满整行。解决思路是用WidgetSpan嵌套Container包裹文本，给Container设置width: double.infinity强制占满可用宽度，同时通过PlaceholderAlignment.fill让容器与文本行对齐。

2. WidgetSpan嵌套排版混乱 #

调整WidgetSpan的对齐方式为PlaceholderAlignment.fill，并匹配文本行高设置Container的垂直内边距，确保文本在容器内垂直居中，避免上下错位。

3. 换行处添加分割线 #

在每个条目（除最后一个）的末尾插入WidgetSpan，嵌套Divider或窄高度的Container作为分割线，设置PlaceholderAlignment.bottom让分割线对齐文本底部，同时用padding调整与文本的间距。

修改后的完整代码 #

Widget richText() {
  return Positioned(
    top: h / 1.9,
    right: w / 4.9,
    child: Material(
      color: Colors.transparent,
      child: Container(
        padding: const EdgeInsets.only(left: 8, right: 0),
        margin: const EdgeInsets.all(0),
        color: Colors.transparent,
        width: wA / 1.365,
        height: hA / 2.3,
        child: RichText(
          softWrap: true,
          textScaleFactor: 1,
          textAlign: TextAlign.justify,
          textDirection: TextDirection.rtl,
          text: TextSpan(
            style: GoogleFonts.notoNaskhArabic(
              fontWeight: FontWeight.bold,
              wordSpacing: 0.05,
              letterSpacing: 0.05,
              height: 2.2,
              fontSize: 24,
              color: Colors.black,
            ),
            children: [
              for (int u = 0; u < _items.length; u++)
                u > 0
                    ? TextSpan(children: [
                        // 背景铺满整行的实现
                        WidgetSpan(
                          alignment: PlaceholderAlignment.fill,
                          child: Container(
                            width: double.infinity,
                            color: indexBackground == u ? Colors.amber : Colors.transparent,
                            padding: const EdgeInsets.symmetric(vertical: 2),
                            child: GestureDetector(
                              onLongPress: () {
                                indexBackground = u;
                                setState(() {});
                              },
                              child: Text(
                                _items[u]['text'],
                                style: GoogleFonts.notoNaskhArabic(
                                  fontWeight: FontWeight.bold,
                                  wordSpacing: 0.05,
                                  letterSpacing: 0.05,
                                  height: 2.2,
                                  fontSize: 24,
                                  color: Colors.black,
                                ),
                              ),
                            ),
                          ),
                        ),
                        const WidgetSpan(
                          alignment: PlaceholderAlignment.middle,
                          child: SizedBox(width: 3),
                        ),
                        WidgetSpan(
                          alignment: PlaceholderAlignment.middle,
                          child: waqaf(u + 1),
                        ),
                        const WidgetSpan(
                          alignment: PlaceholderAlignment.middle,
                          child: SizedBox(width: 8),
                        ),
                        // 换行分割线（最后一个条目不显示）
                        if (u != _items.length - 1)
                          const WidgetSpan(
                            alignment: PlaceholderAlignment.bottom,
                            child: Padding(
                              padding: EdgeInsets.symmetric(vertical: 4),
                              child: Divider(
                                height: 1,
                                color: Colors.grey,
                                thickness: 1,
                              ),
                            ),
                          ),
                      ])
                    : const TextSpan(),
            ],
          ),
        ),
      ),
    ),
  );
}

关键修改说明 #

• 用WidgetSpan+Container替代TextSpan的backgroundColor，实现背景铺满整行。
• 改用GestureDetector处理长按事件，比直接用Recognizer更直观且易维护。
• 分割线通过条件渲染控制只在条目之间显示，避免末尾多余线条。
• 调整Container的vertical padding，匹配原文本的行高，保证排版一致性。

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