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

Кажется, я не могу найти подчеркивание внутри fontStyle свойство TextStyle

Tree

Ответов: 6

Ответы (6)

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

enter image description here

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

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

enter image description here

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

TextSpan немного странный. Параметр text является стилем по умолчанию, но список children содержит стилизованный (и, возможно, не стилизованный) текст, который следует за ним. Вы можете использовать пустую строку для текста, если хотите начать со стилизованного текста.

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

enter image description here

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

и TextDecorationStyle.dotted:

enter image description here

и TextDecorationStyle.double:

enter image description here

и TextDecorationStyle.wavy:

enter image description here

например

Text(
  "Terms and Condition",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),

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

Например

Text(
    "Your text here",
    style: TextStyle(
        decoration: TextDecoration.underline),
    )
)

Вы делаете это, применяя украшение: TextDecoration.underline до TextStyle из Text.

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

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

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

          Text(
            "text",
            style: TextStyle(decoration: TextDecoration.underline),
          )

Контроль расстояния между текстом и подчеркиванием в одной строке

Основываясь на ответе Джо Мюллера, здесь метод расширения, который позволяет контролировать расстояние между текстом и подчеркиванием, не загромождая код дерева виджетов. Используется так:

Сборка виджета (контекст BuildContext) {
  final myStyle = Theme.of (контекст) .textTheme.headline4;

  вернуть текст (
    'Привет мир!',
    // ------------------------------------------------
    // просто применяем подчеркнутый метод к стилю
    style: myStyle?. подчеркнутый (расстояние: 2),
    // ------------------------------------------------
  );
}

Вот расширение:

расширение TextStyleX для TextStyle {
  /// Метод подчеркивания текста с настраиваемым [расстоянием] между текстом
  /// и подчеркните. [Цвет], [толщина] и [стиль] могут быть установлены
  /// как украшение [TextStyle].
  TextStyle подчеркнутый ({
    Цвет? цвет,
    двойное расстояние = 1,
    двойная толщина = 1,
    TextDecorationStyle style = TextDecorationStyle.solid,
  }) {
    вернуть copyWith (
      тени: [
        Тень(
          цвет: this.color ?? Цвета. Черный,
          смещение: Смещение (0, -дистанция),
        )
      ],
      цвет: Цвета.прозрачный,
      украшение: TextDecoration.underline,
      украшениеТолщина: толщина,
      украшениеЦвет: цвет ?? this.color,
      украшениеStyle: стиль,
    );
  }
}

Расширение также позволяет управлять цветом, толщиной и стилем подчеркивания, как и любое другое оформление подчеркивания. Взгляните на , более полный пример в этом DartPad.

Это все еще хак, но он позволяет поддерживать чистоту кода дерева виджетов в ожидании исправления от команды Flutter.

Захватывающий раствор
Если вы хотите контролировать расстояние между текстом и подчеркиванием, вы можете использовать этот прием. Короче говоря, вы скрываете фактический текст с помощью Colors.transparent, а затем отображаете смещенную тень, которая парит над подчеркиванием текста.

        Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.black,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

enter image description here

Как вы увидите ниже, если вы используете нестандартное подчеркивание текста, оно прилипнет к нижней части текста и может выглядеть немного некрасиво,

Расточные растворы

Используя только виджет Текст, вы можете добавить подчеркивание со своим стилем и цветом:

Text(
  "Forgot Password?",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 4,
    decorationStyle: TextDecorationStyle.dashed,
   ),
)

Единственная проблема, с которой я столкнулся с этим подходом, заключается в том, что вы не можете контролировать, насколько близко подчеркивание находится к нижней части текста.

enter image description here

Если вы хотите увеличить интервал, вам придется использовать нетрадиционный подход, который использует Контейнер и его свойство заполнения.

Container(
     padding: EdgeInsets.only(
       bottom: 5, // Space between underline and text
     ),
     decoration: BoxDecoration(
         border: Border(bottom: BorderSide(
         color: Colors.amber, 
         width: 1.0, // Underline thickness
        ))
      ),
     child: Text(
        "Forgot Password?",
        style: TextStyle(
        color: Colors.black,
        ),
       ),
      )

enter image description here

Следите за этой проблемой GitHub, чтобы найти более простое решение.

2022 WebDevInsider