🧩SelectableText

Что такое SelectableText

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

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

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

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SelectableText Example'),),
      body: const Center(
        child: SelectableText(
          'This is an example of SelectableText in Flutter. You can select and copy this text.',
          style: TextStyle(fontSize: 20), // Стиль текста
        ),
      ),
    );
  }
}

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

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

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

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

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

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

  1. text

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

    • Пример:

      text: 'Hello, SelectableText!' // Основной текст для отображения

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

  2. style

    • Описание: Определяет стиль текста, такой как размер, цвет и шрифт.

    • Пример:

      style: TextStyle(fontSize: 20, color: Colors.black) // Настройки стиля текста

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

  3. textAlign

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

    • Пример:

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

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

  4. maxLines

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

    • Пример:

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

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

  5. overflow

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

    • Пример:

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

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

  6. onSelectionChanged

    • Описание: Коллбек, который вызывается при изменении выделенного текста.

    • Пример:

      onSelectionChanged: (selection, cause) {
  print('Selected text: ${selection.base}, ${selection.extent}');
}

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

  7. cursorWidth

    • Описание: Определяет ширину курсора при выделении текста.

    • Пример:

      cursorWidth: 2.0 // Ширина курсора

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

  8. showCursor

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

    • Пример:

      showCursor: true // Курсор будет отображаться

    • Применение: Полезно для управления визуализацией курсора в SelectableText.

  9. cursorColor

    • Описание: Определяет цвет курсора при выделении текста.

    • Пример:

      cursorColor: Colors.blue // Цвет курсора

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

Итог

SelectableText — это удобный инструмент для отображения текста, который пользователи могут выделять и копировать. Он подходит для приложений, где необходимо взаимодействовать с текстом, как в документах или чатах. Используйте SelectableText, чтобы сделать текст более интерактивным и доступным для пользователей.

PreviousFittedBoxNextText

Last updated