🧩Tooltip

Что такое Tooltip

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

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

Вот пример, как использовать Tooltip в вашем приложении:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tooltip Example')),
      body: Center(
        child: Tooltip(
          message: 'Нажмите, чтобы открыть настройки',
          child: IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () {
              // Обработка нажатия кнопки
            },
          ),
        ),
      ),
    );
  }
}

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

  1. message: Это текст, который будет отображаться в тултипе.

  2. child: Это виджет, к которому прикреплен тултип (в данном случае кнопка).

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

  1. String? message

    • Описание: Простое сообщение, отображаемое в тултипе.

    • Пример:

      message: 'Это тултип' // Сообщение

  2. InlineSpan? richMessage

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

    • Пример:

      richMessage: TextSpan(
  text: 'Это ',
  style: TextStyle(color: Colors.black),
  children: [
    TextSpan(text: 'тултип', style: TextStyle(fontWeight: FontWeight.bold)),
  ],
) // Используем InlineSpan

  3. double? height

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

    • Пример:

      height: 30.0 // Высота тултипа

  4. EdgeInsetsGeometry? padding

    • Описание: Поля вокруг текста в тултипе.

    • Пример:

      padding: EdgeInsets.all(8.0) // Поля в 8 пикселей

  5. EdgeInsetsGeometry? margin

    • Описание: Поля вокруг тултипа.

    • Пример:

      margin: EdgeInsets.all(10.0) // Поля для тултипа

  6. double? verticalOffset

    • Описание: Вертикальное смещение тултипа относительно виджета.

    • Пример:

      verticalOffset: 10.0 // Смещение на 10 пикселей вверх

  7. bool? preferBelow

    • Описание: Указывает, следует ли показывать тултип ниже виджета (true) или выше (false).

    • Пример:

      preferBelow: true // Показывать тултип ниже виджета

  8. bool? excludeFromSemantics

    • Описание: Указывает, следует ли исключить тултип из семантики (например, для экранных читалок).

    • Пример:

      excludeFromSemantics: false // Включаем в семантику

  9. Decoration? decoration

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

    • Пример:

      decoration: BoxDecoration(color: Colors.black, borderRadius: BorderRadius.circular(8.0)) // Черный фон с закругленными углами

  10. TextStyle? textStyle

    • Описание: Стиль текста, отображаемого в тултипе.

    • Пример:

      textStyle: TextStyle(color: Colors.white, fontSize: 14.0) // Белый текст размером 14

  11. TextAlign? textAlign

    • Описание: Выравнивание текста в тултипе.

    • Пример:

      textAlign: TextAlign.center // Центрируем текст

  12. Duration? waitDuration

    • Описание: Время ожидания перед показом тултипа после наведения.

    • Пример:

      waitDuration: Duration(seconds: 1) // Ждем 1 секунду перед показом

  13. Duration? showDuration

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

    • Пример:

      showDuration: Duration(seconds: 2) // Показываем тултип 2 секунды

  14. Duration? exitDuration

    • Описание: Время, за которое тултип исчезает.

    • Пример:

      exitDuration: Duration(milliseconds: 300) // Тултип исчезает за 300 миллисекунд

  15. bool enableTapToDismiss

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

    • Пример:

      enableTapToDismiss: true // Позволяем закрывать тултип нажатием

  16. TooltipTriggerMode? triggerMode

    • Описание: Режим срабатывания тултипа (например, при наведении или при нажатии).

    • Пример:

      triggerMode: TooltipTriggerMode.tap // Срабатывает при нажатии

  17. bool? enableFeedback

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

    • Пример:

      enableFeedback: true // Включаем звуковой отклик

  18. void Function()? onTriggered

    • Описание: Функция, вызываемая, когда тултип показывается.

    • Пример:

      onTriggered: () {
  print('Тултип показан');
}

  19. Widget? child

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

    • Пример:

      child: Icon(Icons.info) // Иконка как дочерний элемент

Заключение

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

PreviousPopupMenuButtonNextDialog

Last updated