如何在 Flutter 中通过文本制作一条线?

2023-12-26

使用TextStyle()Flutter 中的类,如何删除旧价格?


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

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

您还可以使用RichText https://docs.flutter.io/flutter/widgets/RichText-class.html小部件,或Text.rich() https://api.flutter.dev/flutter/widgets/Text/Text.rich.html构造函数。

基于这个示例代码 https://github.com/flutter/flutter/blob/09276bea258737e11b109e227f70eac94a4e1691/packages/flutter/lib/src/painting/text_style.dart#L106,显示折扣价:

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',
      ),
    ],
 ),
)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Flutter 中通过文本制作一条线? 的相关文章

随机推荐