Flutter中非英文文本背景色高度不一致问题求助：部分场景无法通过selectionHeightStyle修复

我之前也碰到过这个棘手的问题——Flutter里给非英文文本设置背景色时，背景高度总是和英文文本不一致，哪怕用了selectionHeightStyle修复选中状态的问题，像SelectableText.rich这类场景里未选中的文本背景高度还是不对。下面给你两个实用的解决办法：

1. 普通Text组件的快速调整 #

对于普通的Text组件，你可以通过微调TextStyle里的height属性，让背景高度和文本对齐。这个数值需要根据你的字体大小稍作调整，比如字体大小16的话，设置height: 1.2一般能解决问题：

import 'package:flutter/material.dart';
void main() => runApp(const Home());

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Demo')),
        body: Center(
          child: Text(
            "曾经的我们",
            style: TextStyle(
              backgroundColor: Colors.blue,
              height: 1.2, // 调整这个值匹配背景高度
            ),
          ),
        ),
      ),
    );
  }
}

2. SelectableText.rich的彻底解决方案 #

如果是SelectableText.rich的场景，单纯靠TextStyle的backgroundColor还是会有问题。这时候我们可以用WidgetSpan包裹文本，外层套一个Container来精准控制背景的高度和 padding，不管选中还是未选中状态都能保持一致：

import 'package:flutter/material.dart';
void main() => runApp(const Home());

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Demo')),
        body: Center(
          child: SelectableText.rich(
            TextSpan(
              children: [
                WidgetSpan(
                  child: Container(
                    padding: const EdgeInsets.symmetric(vertical: 2), // 自定义背景内边距
                    color: Colors.blue,
                    child: const Text("曾经的我们"),
                  ),
                ),
                const TextSpan(text: " | 英文测试 English Text"), // 对比英文文本
              ],
            ),
            selectionHeightStyle: BoxHeightStyle.tight, // 选中状态也保持一致
          ),
        ),
      ),
    );
  }
}

这种方式的好处是完全可控，你可以通过Container的padding、height等属性，精确调整背景的高度和文本的间距，彻底解决非英文文本背景高度不一致的问题。

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