🧩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 предоставляет удобный способ для отображения дополнительных опций и действий для пользователя. С его помощью вы можете легко настраивать внешний вид, поведение и содержимое меню в своем приложении, улучшая пользовательский интерфейс и взаимодействие.