RichText 的 textSpan 周围的边框

Question

我有一个 RichText 小部件，其中包含一些 TextSpan. 在 TextSpan 小部件周围，我想在它周围放置一个边框。另外，我希望它可以在网络上运行，但目前从我的方法来看，它仅适用于移动设备。

预期：我想实现以下目标。

使用此代码的结果：

    Paint paint = Paint()
  ..color = Colors.blue
  ..style = PaintingStyle.stroke
  ..strokeCap = StrokeCap.round
  ..strokeWidth = 2.0;

RichText(
   text: TextSpan(children: [
       TextSpan(text: text1),
       TextSpan(text: text2, style: TextStyle(background: paint)),
       TextSpan(text: text3, )
  ]))

请帮忙！！！

如果不清楚的话，简单来说，我只想在高亮部分周围有一个边框，并去掉下图中的高亮而不改变任何其他内容

Answer 1

你可以像这样在容器内使用文本

return Container(
        margin: const EdgeInsets.all(30.0),
        padding: const EdgeInsets.all(10.0),
        decoration: BoxDecoration(
    border: Border.all(),
  ), 
        child: Text(
          "text",
          style: TextStyle(fontSize: 30.0),
        ),
      );

Answer 2

由于操作的问题发生在 web 中，由于 Flutter-web 本身存在错误，目前无法解决。但是，以下答案包含一个通用解决方案，该解决方案在固定后应该可以在颤振网络中使用。

新答案：04.03.2020 为了达到您想要的效果，有一个名为blendMode 的选项，您必须在Paint 对象中使用BlendMode.difference。您可以使用它来获得类似于您想要的结果。

相同的代码

 TextSpan(
          style: TextStyle(
            background: Paint()
              ..color = Colors.blue
              ..style = PaintingStyle.stroke
              ..strokeWidth = 2.0
              ..strokeJoin = StrokeJoin.bevel
              ..blendMode = BlendMode.difference,
          ),
          text:
              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        ),

注意：我也在尝试另一种费力的手动绘制边界的方法。如果您遇到其他一些解决方案，请在此处分享。 :) 希望这对你有所帮助。

旧答案

所以根据运行时的上下文，我切换文本样式。对于网络，这会传递TextDecorations 的列表，例如underline 和overline。这不包括文本的结尾，但我相信比在结果中完全突出显示的文本更好。还有一些额外的选项，如 decorationThickness 和 decorationStyle 可以修改。

这是解决方案在 Flutter Web 模式下的外观。

Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 1.0;

    return RichText(
      text: TextSpan(
        children: [
          TextSpan(text: 'bounded text1'),
          TextSpan(
            text: ' Will this work ',
            style: kIsWeb
                ? TextStyle(
                    decoration: TextDecoration.combine(
                        [TextDecoration.overline, TextDecoration.underline]),
                    decorationColor: Colors.blue,
                  )
                : TextStyle(
                    background: paint,
                  ),
          ),
          TextSpan(
            text: 'bounded text 3',
          )
        ],
      ),
    );

我会将这些样式提取为一个常量，并根据当前运行的上下文（如 android 或 web）动态应用它们。希望这会有所帮助。