🧩RichText

Что такое RichText

RichText — это виджет в Flutter, который позволяет отображать текст с разными стилями в одном и том же текстовом блоке. Подумайте о RichText как о красивом буклете, где разные части текста могут быть жирными, курсивными, разного цвета и размера. Это полезно, когда вы хотите выделить определенные слова или фразы в тексте.

Пример использования

В этом примере мы создадим текст с разными стилями, используя RichText.

import 'package:flutter/material.dart';

class RichTextExample extends StatelessWidget {
  const RichTextExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RichText Example')),
      body: Center(
        child: RichText(
          text: const TextSpan(
            children: [
              TextSpan(
                text: 'Hello, ',
                style: TextStyle(fontSize: 24, color: Colors.black),
              ),
              TextSpan(
                text: 'Flutter!',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue),
              ),
              TextSpan(
                text: ' This is a ',
                style: TextStyle(fontSize: 24, color: Colors.black),
              ),
              TextSpan(
                text: 'RichText example.',
                style: TextStyle(fontSize: 24, fontStyle: FontStyle.italic, color: Colors.red),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Как работает код

  1. Scaffold — это основа для нашего интерфейса, как холст для художника.

  2. AppBar — верхняя панель, где написано название приложения.

  3. RichText — используется для отображения текста с разными стилями.

  4. TextSpan — это элемент, который представляет отдельные части текста и позволяет задавать разные стили.

  5. TextStyle — используется для определения стиля текста, например, размера, цвета и шрифта.

Все настройки RichText

  1. text

    • Описание: Основной текст, который будет отображаться с разными стилями. Обычно используется TextSpan.

    • Пример:

      text: TextSpan(
  children: [
    TextSpan(text: 'Hello, ', style: TextStyle(...)),
    // Другие TextSpan
  ],
)

    • Применение: Позволяет создать составной текст с различными стилями и форматами.

  2. textAlign

    • Описание: Определяет, как текст будет выровнен внутри виджета. Может быть TextAlign.left, TextAlign.center, TextAlign.right, и другие.

    • Пример:

      textAlign: TextAlign.center // Текст будет выровнен по центру

    • Применение: Полезно для управления горизонтальным выравниванием текста.

  3. textDirection

    • Описание: Указывает направление текста (например, слева направо или справа налево). Может быть TextDirection.ltr или TextDirection.rtl.

    • Пример:

      textDirection: TextDirection.ltr // Текст будет направлен слева направо

    • Применение: Используется для правильного отображения текста в зависимости от языка.

  4. locale

    • Описание: Указывает локализацию текста, которая может быть использована для правильного отображения шрифтов и символов.

    • Пример:

      locale: Locale('en', 'US') // Локализация для английского языка

    • Применение: Полезно для международных приложений, где нужно поддерживать разные языки.

  5. overflow

    • Описание: Определяет, как обрабатывать текст, который выходит за пределы виджета. Может быть TextOverflow.clip, TextOverflow.ellipsis, и другие.

    • Пример:

      overflow: TextOverflow.ellipsis // Если текст не помещается, добавляется "..."

    • Применение: Используется для управления поведением текста, когда он слишком длинный для доступного пространства.

  6. maxLines

    • Описание: Ограничивает количество строк, которые может занимать текст.

    • Пример:

      maxLines: 2 // Текст будет отображаться только на 2 строках

    • Применение: Полезно для ограничения текста в определенном пространстве.

Итог

RichText — это мощный инструмент для создания текстовых элементов с разнообразными стилями в вашем интерфейсе. Если вы хотите сделать текст более выразительным и интересным, используйте RichText, чтобы комбинировать разные стили и форматы в одном текстовом блоке.

PreviousОтображение текстаNextFittedBox

Last updated