flutter - 如何在 Flutter 中装饰文字笔划？

Question

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

标签： flutter

Answer 1

自从在 TextStyle 中添加了前景色后，无需任何变通方法就可以实现描边。在 TextStyle 文档中添加了填充边框文本下的描边的显式示例：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],
      ),
    ),
  ],
)

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