如何在Flutter中装饰文字笔划? [英] How to decorate text stroke in Flutter?

问题描述

如何在Flutter中装饰文字笔划? 就像 -webkit-text-stroke-CSS

How to decorate text stroke in Flutter? It's like -webkit-text-stroke - CSS

推荐答案

由于在TextStyle中添加了前景色，因此可以在没有任何解决方法的情况下进行描边. TextStyle文档中添加了带有填充边框的文本的笔触的显式示例: https://master-api.flutter.dev/flutter/painting/TextStyle-class.html#painting.TextStyle.6

Stroke has been possible without workarounds since the addition of foreground paints in TextStyle. An explicit example of stroke under fill bordered text has been added in the TextStyle documentation: https://master-api.flutter.dev/flutter/painting/TextStyle-class.html#painting.TextStyle.6

此示例在此处转载:

Stack(
  children: <Widget>[
    // Stroked text as border.
    Text(
      'Greetings, planet!',
      style: TextStyle(
        fontSize: 40,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 6
          ..color = Colors.blue[700],
      ),
    ),
    // Solid text as fill.
    Text(
      'Greetings, planet!',
      style: TextStyle(
        fontSize: 40,
        color: Colors.grey[300],
      ),
    ),
  ],
)

通过删除堆栈并仅使用第一个笔划Text小部件，就可以单独进行笔划.也可以通过交换第一个和第二个文本"小部件来调整笔划/填充顺序.

Stroke by itself is possible by removing the Stack and just using the first stroke Text widget by itself. The stroke/fill order can also be adjusted by swapping the first and second Text widget.

这篇关于如何在Flutter中装饰文字笔划?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！