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

由于op的问题发生在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.',
        ),

注意:我还在尝试另一种艰苦的手动绘制边界的方法。如果你遇到了其他的解决方案，请在这里分享。:)希望这对你有帮助。

旧答案

因此，根据运行时的上下文，我会切换文本样式。对于web，这将传递一个TextDecorations列表，如underline和overline。这并没有涵盖文本的结尾，但我认为这比结果中完全突出显示的文本要好。还有一些额外的选项，比如decorationThickness和decorationStyle。

这是该解决方案在颤动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。希望这能有所帮助。

Answer 2

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

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),
        ),
      );