如何在 Flutter 中通過文本划線？

Question

在 Flutter 中使用TextStyle() class，如何刪除舊價格？

Answer 1

將刪除線裝飾直接應用於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',
      ),
    ],
 ),
)

Answer 2

          style: TextStyle(decoration: TextDecoration.lineThrough),

Answer 3

這是下划線使用的最簡單方法

TextStyle(decoration: TextDecoration.underline)

您可以使用underline, lineThrough, or overline

這是高級下划線樣式

TextStyle(
      decoration: TextDecoration.underline,
      decorationColor: Colors.red,
      decorationStyle: TextDecorationStyle.dotted,
    )

您可以使用穩定，雙精度，虛線，虛線和波浪形裝飾裝飾。

Answer 4

如果你想線條顏色不同，你可以使用它

    Container(
        padding: EdgeInsets.all(20.0),
        child: Stack(
          children: <Widget>[
            Text(
              "Lorem Ipsum",
              style: TextStyle(
                fontSize: 20,
              ),
            ),
            Container(
              child: Text(
                "Lorem Ipsum",
                style: TextStyle(
                  color: Colors.transparent,
                  decorationColor: Colors.red,
                  decorationStyle: TextDecorationStyle.solid,
                  decoration:
                  TextDecoration.lineThrough,
                  fontSize: 20,
                ),
              ),
            )
          ],
        ))

Answer 5

我用這個

Column(
    children: [
      Text(
        "sample text"
      ),
      Divider(color: Colors.red,)
    ],
  ),