flutter - 多行 TextSpan 中的识别器问题

Question

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

这是我的代码：

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”。

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

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

Answer 1

添加间距 TextSpan 可以解决此问题：

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