Treatter | Ультра-практическое простое всплывающее меню Popupmenubutton

Flutter

Я считаю, что в реальном процессе разработки у меня обязательно будет такая функция:

нажмитеAppBarКнопка в правом верхнем углу открывает меню для выбора пользователем.

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

PopupMenuButton

Или старые правила, сначала посмотрите официальную инструкцию:

Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item.

One of child or icon may be provided, but not both. If icon is provided, then PopupMenuButton behaves like an IconButton.

If both are null, then a standard overflow icon is created (depending on the platform).

примерно означает:

onSelected

может обеспечитьchild or icon

Если пусто, прилагается значок по умолчанию, в зависимости от платформы.

Конструктор

Прочитав официальное описание, давайте посмотрим на конструктор:

const PopupMenuButton({
  Key key,
  @required this.itemBuilder,
  this.initialValue,
  this.onSelected,
  this.onCanceled,
  this.tooltip,
  this.elevation = 8.0,
  this.padding = const EdgeInsets.all(8.0),
  this.child,
  this.icon,
  this.offset = Offset.zero,
  this.enabled = true,
}) : assert(itemBuilder != null),
assert(offset != null),
assert(enabled != null),
assert(!(child != null && icon != null)), // fails if passed both parameters
super(key: key);

Там каждый параметр должен иметь хорошее понимание, я не слишком много, чтобы объяснить,

Единственный параметр, который должен передаватьсяitemBuilder, вы также можете увидеть следующее утверждение:

assert(!(child != null && icon != null))Определяем дочерний, иконка пока не пустая, а если да то ошибка.

Простая демонстрация

Конструктор разбирается, а официал еще и демо предоставляет, давайте посмотрим на эффект запуска:

Давайте еще раз посмотрим на код:

/// 首先定义了一个枚举
enum WhyFarther {
  harder,
  smarter,
  selfStarter,
  tradingCharter,
}

/// ------------------------------------

/// build 方法
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('PopupMenuButtonPage'),
      actions: <Widget>[
        PopupMenuButton<WhyFarther>(
          onSelected: (WhyFarther result) {
            setState(() {
              _selection = result;
            });
          },
          icon: Icon(Icons.more_vert),
          itemBuilder: (BuildContext context) => <PopupMenuEntry<WhyFarther>>[
            const PopupMenuItem<WhyFarther>(
              value: WhyFarther.harder,
              child: Text('Working a lot harder'),
            ),
            const PopupMenuItem<WhyFarther>(
              value: WhyFarther.smarter,
              child: Text('Being a lot smarter'),
            ),
            const PopupMenuItem<WhyFarther>(
              value: WhyFarther.selfStarter,
              child: Text('Being a self-starter'),
            ),
            const PopupMenuItem<WhyFarther>(
              value: WhyFarther.tradingCharter,
              child: Text('Placed in charge of trading charter'),
            ),
          ],
        ),
      ],
    ),
    body: Container(),
  );
}

Объясните логику:

  1. Сначала определите перечисление
  2. затем вAppBarопределяется в «действиях»PopupMenuButton
  3. установить значок наIcon(Icons.more_vert)
  4. itemBuilderвернутьList<PopupMenuEntry<T>>
  5. Здесь передано значениеPopupMenuItem<WhyFarther>
  6. затем определитеonSelectedПрием параметров Нажмите Tune

Суммировать

Собственно, логика его реализации иDropdownButtonПочти все б/уPopupRoute,

Студенты, интересующиеся этой областью, могут ознакомиться с моими предыдущими статьями:Серия исходных кодов Flutter: анализ исходного кода DropdownButton

Полный код загружен на GitHub:GitHub.com/web1209/…

img

Категории