Як виділити шрифт (або відформатувати) фрагмент тексту в абзаці?


97

Як я можу отримати рядок тексту з різним форматуванням?

наприклад:

Привіт Світ

Відповіді:


202

Вам слід використовувати віджет RichText .

Віджет RichText буде приймати віджет TextSpan, який також може мати список дочірніх TextSpans.

Кожен віджет TextSpan може мати різний TextStyle .

Ось приклад коду для візуалізації: Hello World

var text = new RichText(
  text: new TextSpan(
    // Note: Styles for TextSpans must be explicitly defined.
    // Child text spans will inherit styles from parent
    style: new TextStyle(
      fontSize: 14.0,
      color: Colors.black,
    ),
    children: <TextSpan>[
      new TextSpan(text: 'Hello'),
      new TextSpan(text: 'World', style: new TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
 );

26

[ОНОВЛЕННЯ]

Відповідь нижче найкраще підходить для кількох слів, а не для абзацу. Якщо у вас довге речення або абзац, де вам потрібно відформатувати певний текст, віддайте перевагу використанню RichText, як запропоновано @DvdWasibi у відповіді вище

[СТАРИЙ ВІДПОВІДЬ]

Мені подобається тримати мій код коротким і очистити це як я б це додати два текстових поля в рядку один з нормальним шрифтом і іншим жирним шрифтом ,

Примітка: Це може не виглядати добре, якщо довгий абзац виглядає добре для заголовків тощо.

Row(children: <Widget>[
      Text("Hello"),
      Text("World", style: TextStyle(fontWeight: FontWeight.bold))
    ])
`

і ви повинні отримати бажаний результат як "Hello World "


8
Це не найкраща ідея, якщо ви збираєтеся мати абзац тексту. Кожен текст () всередині рядка створює власний вертикальний / горизонтальний простір.
Мухаммед Аділ,

так яка альтернатива використанню рядка? а якщо я хочу текст поруч з іншим форматуванням
maheshmnj

2
подивіться вище відповідь від @Dvdwasibi, просто спробуйте свою реалізацію з великим абзацом, і ви знайдете два різних абзаци поруч. ваша відповідь правильна для 2/3 слів, але не для абзацу.
Мухаммед Аділ,

10
return RichText(
  text: TextSpan(
    text: 'Can you ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'find the',
        style: TextStyle(
          color: Colors.green,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.wavy,
        ),
        recognizer: _longPressRecognizer,
      ),
      TextSpan(text: 'secret?'),
    ],
  ),
);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.