Как подчеркнуть текст во флаттере

106

Как подчеркнуть текст во флаттере внутри Textвиджета?

Я не могу найти подчеркивание внутри fontStyleсвойстваTextStyle

Дерево
источник

Ответы:

235

Подчеркивая все, вы можете установить TextStyle в виджете Text.

введите описание изображения здесь

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

Если вы хотите подчеркнуть только часть текста, вам нужно использовать Text.rich()(или виджет RichText) и разбить строку на TextSpans, к которым вы можете добавить стиль.

введите описание изображения здесь

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если хотите начать со стилизованного текста.

Вы также можете добавить TextDecorationStyle, чтобы изменить внешний вид украшения. Вот пунктир:

введите описание изображения здесь

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

и TextDecorationStyle.dotted:

введите описание изображения здесь

и TextDecorationStyle.double:

введите описание изображения здесь

и TextDecorationStyle.wavy:

введите описание изображения здесь

Suragch
источник
9
Можно ли добавить пробел между словами и подчеркиванием?
felangga
@felangga, это хороший вопрос. Вероятно, это будет связано с исходным уровнем. Это то, что я хочу исследовать больше, но пока не знаю, как это сделать. Изучите исходный код и дайте мне знать, если разберетесь.
Suragch
Есть открытая проблема с добавлением пробела между текстом и подчеркиванием. github.com/flutter/flutter/issues/30541
Джо Мюллер
32

Вы делаете это, обратившись decoration: TextDecoration.underlineк TextStyleоф Text.

С примером темы:

          Text(
            "text",
            style: Theme
                .of(context)
                .accentTextTheme
                .subhead
                .copyWith(decoration: TextDecoration.underline),
          )

Базовый пример:

          Text(
            "text",
            style: TextStyle(decoration: TextDecoration.underline),
          )
Дерево
источник
3

Вы можете использовать TextDecoration в стиле, чтобы подчеркнуть данный текст.

Например

Text(
    "Your text here",
    style: TextStyle(
        decoration: TextDecoration.underline),
    )
)
Анджали Кундер
источник
2

например

Text(
  "Terms and Condition",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),
Мохаммед Аланани
источник