如何在Flutter中给文本加下划线 [英] How to underline text in flutter

问题描述

如何在Text小部件内的浮动文本下划线?

How to underline text in flutter inside Text widget?

我似乎找不到TextStyle

推荐答案

在强调所有内容时，都可以在文本"小部件上设置TextStyle.

When underlining everything you can set a TextStyle on the Text widget.

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

如果只想在文本的下划线，则需要使用Text.rich()(或RichText小部件)，并将字符串拆分为可以添加样式的TextSpans.

If you only want to underline part of the text then you need to use Text.rich() (or a RichText widget) and break the string into TextSpans that you can add a style to.

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 50),
    children: <TextSpan>[
      TextSpan(
          text: 'world',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
      // can add more TextSpans here...
    ],
  ),
)

TextSpan有点奇怪. text参数是默认样式，但是children列表包含紧随其后的样式(可能是未样式)文本.如果要以样式文本开头，可以为text使用空字符串.

TextSpan is a little strange. The text parameter is the default style but the children list contains the styled (and possibly unstyled) text that follow it. You can use an empty string for text if you want to start with styled text.

您还可以添加TextDecorationStyle来更改装饰的外观.这是破折号:

You can also add a TextDecorationStyle to change how the decoration looks. Here is dashed:

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

和TextDecorationStyle.dotted:

和TextDecorationStyle.double:

和TextDecorationStyle.wavy:

这篇关于如何在Flutter中给文本加下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！