🧩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, чтобы сделать текст более интерактивным и доступным для пользователей.