🧩PopupMenuButton

Что такое PopupMenuButton

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

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

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

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PopupMenuButton Example')),
      body: Center(
        child: PopupMenuButton<String>(
          onSelected: (value) {
            // Обработка выбранного значения
            print('Выбрано: $value');
          },
          itemBuilder: (BuildContext context) {
            return {'Option 1', 'Option 2', 'Option 3'}.map((String choice) {
              return PopupMenuItem<String>(
                value: choice,
                child: Text(choice),
              );
            }).toList();
          },
          child: const Text('Открыть меню'),
        ),
      ),
    );
  }
}

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

  1. itemBuilder: Здесь вы создаете элементы меню, возвращая список PopupMenuEntry с использованием PopupMenuItem.

  2. onSelected: Функция, которая вызывается, когда пользователь выбирает элемент меню.

  3. child: Это виджет, который представляет собой кнопку, открывающую меню.

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

  1. required List<PopupMenuEntry<dynamic>> Function(BuildContext) itemBuilder

    • Описание: Функция, возвращающая список элементов меню.

    • Пример:

      itemBuilder: (BuildContext context) {
  return [
    PopupMenuItem(value: 'Option 1', child: Text('Option 1')),
    PopupMenuItem(value: 'Option 2', child: Text('Option 2')),
  ];
}

  2. dynamic initialValue

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

    • Пример:

      initialValue: 'Option 1' // Начальное значение

  3. void Function()? onOpened

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

    • Пример:

      onOpened: () {
  print('Меню открыто');
}

  4. void Function(dynamic)? onSelected

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

    • Пример:

      onSelected: (value) {
  print('Выбрано: $value');
}

  5. void Function()? onCanceled

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

    • Пример:

      onCanceled: () {
  print('Меню закрыто без выбора');
}

  6. String? tooltip

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

    • Пример:

      tooltip: 'Открыть меню'

  7. double? elevation

    • Описание: Высота тени для всплывающего меню.

    • Пример:

      elevation: 8.0 // Высота тени

  8. Color? shadowColor

    • Описание: Цвет тени для всплывающего меню.

    • Пример:

      shadowColor: Colors.black54 // Полупрозрачный черный

  9. Color? surfaceTintColor

    • Описание: Цвет, используемый для затенения поверхности меню.

    • Пример:

      surfaceTintColor: Colors.white // Белый цвет

  10. EdgeInsetsGeometry padding

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

    • Пример:

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

  11. EdgeInsetsGeometry? menuPadding

    • Описание: Поля вокруг содержимого меню.

    • Пример:

      menuPadding: EdgeInsets.all(12.0) // Поля для меню

  12. Widget? child

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

    • Пример:

      child: Icon(Icons.more_vert) // Иконка как кнопка

  13. double? splashRadius

    • Описание: Радиус эффекта брызг при нажатии на кнопку.

    • Пример:

      splashRadius: 24.0 // Радиус брызг

  14. Widget? icon

    • Описание: Иконка, отображаемая на кнопке.

    • Пример:

      icon: Icon(Icons.menu) // Иконка меню

  15. double? iconSize

    • Описание: Размер иконки.

    • Пример:

      iconSize: 30.0 // Размер иконки

  16. Offset offset

    • Описание: Смещение всплывающего меню относительно кнопки.

    • Пример:

      offset: Offset(0, 40) // Смещение на 40 пикселей вниз

  17. bool enabled

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

    • Пример:

      enabled: true // Кнопка доступна

  18. ShapeBorder? shape

    • Описание: Форма кнопки.

    • Пример:

      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)) // Закругленные углы

  19. Color? color

    • Описание: Цвет кнопки.

    • Пример:

      color: Colors.blue // Синий цвет

  20. Color? iconColor

    • Описание: Цвет иконки на кнопке.

    • Пример:

      iconColor: Colors.white // Белый цвет для иконки

  21. bool? enableFeedback

    • Описание: Указывает, включен ли звуковой отклик при нажатии на кнопку.

    • Пример:

      enableFeedback: true // Включаем отклик

  22. BoxConstraints? constraints

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

    • Пример:

      constraints: BoxConstraints(maxWidth: 200) // Ограничиваем ширину до 200 пикселей

  23. PopupMenuPosition? position

    • Описание: Позиция всплывающего меню.

    • Пример:

      position: PopupMenuPosition.over // Меню появляется поверх кнопки

  24. Clip clipBehavior

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

    • Пример:

      clipBehavior: Clip.hardEdge // Обрезка с жесткими краями

  25. bool useRootNavigator

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

    • Пример:

      useRootNavigator: false // Используем навигатор текущего контекста

  26. AnimationStyle? popUpAnimationStyle

    • Описание: Стиль анимации для появления меню.

    • Пример:

      popUpAnimationStyle: AnimationStyle.fade // Эффект затухания

  27. RouteSettings? routeSettings

    • Описание: Настройки маршрута для меню.

    • Пример:

      routeSettings: RouteSettings(name: 'PopupMenu') // Имя маршрута

  28. ButtonStyle? style

    • Описание: Стиль кнопки.

    • Пример:

      style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.blue)) // Синий фон для кнопки

Заключение

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

PreviousSnackBarNextTooltip

Last updated