多行 TextSpan 中的识别器问题答案

【问题标题】：Recognizer issue in multi-line TextSpan多行 TextSpan 中的识别器问题
【发布时间】：2021-04-12 03:29:25
【问题描述】：

如您所见，一个带有红色文本和绿色文本的黄色容器。

这是我的代码：

class DraftPage extends StatelessWidget {
  DraftPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: Container(
        color: Colors.yellow,
        child: Text.rich(
          TextSpan(
            children: [
              TextSpan(
                text: 'AAAAAAAAAAAAAA',
                style: TextStyle(fontSize: 20, color: Colors.red),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    print('A');
                  },
              ),
              TextSpan(
                text: 'BBBBBBBBBBBBBBBBBBB',
                style: TextStyle(fontSize: 20, color: Colors.blue),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    print('B');
                  },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

当我点击红色文本时控制台打印'A'并在点击绿色文本时打印'B'。

更重要的是，当我点击绿色文本中的第二行时，控制台也会打印“B”。

显然这是一个错误。那我该如何解决呢？

您可以使用我上面的代码进行测试。

【问题讨论】：

标签： flutter dart textspan

【解决方案1】：

附加一个间距 TextSpan 可以解决这个问题：

TextSpan(
    text: 'your text',
),
TextSpan(
    // just append an spacing text
    text: ' ',
),

【讨论】：