flutter - 如何在 Flutter 中通过文本划线？

Question

在 Flutter 中使用 TextStyle() 类，如何突破旧价格？

Answer 1

直接将删除线装饰应用于 Text 小部件:

Text('\$8.99', style: TextStyle(decoration: TextDecoration.lineThrough))

您还可以使用 RichText 设置段落的单独跨度样式。小部件，或 Text.rich()构造函数。

基于 this example code , 以显示折扣价:

RichText()

new RichText(
  text: new TextSpan(
    text: 'This item costs ',
    children: <TextSpan>[
      new TextSpan(
        text: '\$8.99',
        style: new TextStyle(
          color: Colors.grey,
          decoration: TextDecoration.lineThrough,
        ),
      ),
      new TextSpan(
        text: ' \$3.99',
      ),
    ],
  ),
)

Text.rich()

Text.rich(TextSpan(
    text: 'This item costs ',
    children: <TextSpan>[
      new TextSpan(
        text: '\$8.99',
        style: new TextStyle(
          color: Colors.grey,
          decoration: TextDecoration.lineThrough,
        ),
      ),
      new TextSpan(
        text: ' \$3.99',
      ),
    ],
 ),
)