Flutter PopupMenuButton - 如何有條件地禁用它

Question

我在appTitle上有一個簡單的PopupMenuButton實現。 這里是：

PopupMenuItem<int> _buildMenuItem(int size) {
  return PopupMenuItem<int>(
    value: size,
    child: Text('${size}x$size'),
  );
}

return Scaffold(
  appBar: AppBar(
    title: Text('Some title'),
    actions: <Widget>[
      PopupMenuButton<int>(
        icon: Icon(Icons.refresh),
        onSelected: _canReplay()
            ? (int size) {
                // do something with the size
              }
            : null,
        itemBuilder: (BuildContext context) => <PopupMenuItem<int>>[
              _buildMenuItem(3),
              _buildMenuItem(4),
              _buildMenuItem(5),
            ],
      ),
    ],
  ),
  body: ...
);

更新 - 我已經意識到我的初步問題可能不太清楚，所以我在下面重述：

我想要實現的是根據app條件禁用PopupMenuButton 。 使用上面的代碼，我可以啟用/禁用onSelected方法調用，但是，圖標外觀不會改變。

總結一下 - 我希望整個PopupMenuButton及其圖標以相同的方式被禁用IconButton被禁用，你將null傳遞給它的onPressed方法。 這樣，用戶甚至無法按下按鈕並調用菜單。

這可以實現嗎？

Answer 1

您可以使用PopupMenuItem小部件的enabled屬性。

  PopupMenuItem<int> _buildMenuItem(int size, bool enabled) {
    return PopupMenuItem<int>(
      value: size,
      child: Text('${size}x$size'),
      enabled: enabled,
    );
  }


      itemBuilder: (BuildContext context) => <PopupMenuItem<int>>[
        _buildMenuItem(3, true),
        _buildMenuItem(4, false),
        _buildMenuItem(5, true),
      ],

更多信息： https ： //docs.flutter.io/flutter/material/PopupMenuItem/enabled.html

UPDATE

根據您提供給我們的關於您的問題的新信息，不可能使用PopupMenuButton按鈕禁用該按鈕，但這是Flutter，因此您可以創建自己的Widget。

我創建了一個自定義PopupMenuButton ，您可以在其中使用enabled屬性，看看：

https://gist.github.com/diegoveloper/a388dd42a01ffff04cd51ec026381fe3

用法：

    MyOwnPopupMenuButton<int>(
          enabled: _canReplay(),
          icon: Icon(
            Icons.refresh,
            color: _canReplay() ? Colors.black : Colors.black.withOpacity(0.4),
          ),
          onSelected: _canReplay()
              ? (int size) {
                  // do something with the size
                }
              : null,
          itemBuilder: (BuildContext context) => <PopupMenuItem<int>>[
                _buildMenuItem(3),
                _buildMenuItem(4),
                _buildMenuItem(5),
              ],
        )

Answer 2

幾個小時后，我最終得到了一個符合我要求的以下解決方案，並且無需任何復雜的自定義小部件即可實現。 這里是：

return Scaffold(
  appBar: AppBar(
    title: Text(allTranslations.text('Some title')),
    actions: <Widget>[
      _canReplay()
          ? PopupMenuButton<int>(
              icon: Icon(Icons.refresh),
              onSelected: (int size) {
                // do something with size
              },
              itemBuilder: (BuildContext context) => <PopupMenuItem<int>>[
                    _buildMenuItem(3),
                    _buildMenuItem(4),
                    _buildMenuItem(5),
                  ],
            )
          : IconButton(
              icon: Icon(Icons.refresh),
        onPressed: null,
            ),
    ],
  ),
  body: ...
);