1. ホーム
  2. flutter

[解決済み] Flutterでテキストに線を引くには?

2023-07-28 01:24:35

質問

を使用して TextStyle() クラスを使用して、どのように古い価格を打ち抜くことができますか?

どのように解決するには?

取り消し線の装飾を Text ウィジェットに直接適用する。

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

また、段落を分割してスタイルを設定するには RichText ウィジェット、または Text.rich() のコンストラクタを使用します。

に基づいて このサンプルコード のように、割引価格を表示するようにします。

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',
      ),
    ],
 ),
)