mui 弹出菜单 选择后怎么关闭

Posted 2023-03-23

　　mui是一个高性能的html5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问mui官网

　　DOM结构

　　关于mui页面的dom，你需要知道如下规则。

　　固定栏靠前

　　所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；
### 一切内容都要包裹在mui-content中
除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：

　　

　　[css] view plain copy.mui-bar-nav ~ .mui-content  padding-top: 44px;    .mui-bar-footer ~ .mui-content   padding-bottom: 44px;    .mui-bar-tab ~ .mui-content   padding-bottom: 50px;    你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在.mui-content中。

　　始终为button按钮添加type属性

　　若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。

　　窗口管理

　　页面初始化：必须执行mui.init方法

　　mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；

　　页面跳转：抛弃href跳转

　　当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用[mui.openWindow方法](http://dcloudio.github.io/mui/javascript/#openwindow)打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面；扩展阅读：

　　hello mui中的无等待窗体切换是如何实现的

　　提示HTML5的性能体验系列之一 避免切页白屏

　　页面关闭：勿重复监听backbutton

　　mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。
手势操作

　　点击：忘记click

　　快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，统统使用如下代码：

　　[javascript] view plain copy

　　element.addEventListener(\'tap\',function()

　　//点击响应逻辑   );

参考技术A 打开:我的电脑--控制面板--声音和音频设备
点击:声音选项,在程序事件中选择要加声音或者要去掉声音的选项
然后在下面的声音选项中选择:无/任意一种声音

选择项目后如何不关闭 PopUpMenuButton？

【中文标题】选择项目后如何不关闭 PopUpMenuButton？

【英文标题】：How not to dismiss a PopUpMenuButton after selecting an item?

【发布时间】：2020-08-12 04:18:05

【问题描述】：

我正在使用颤振的 PopUpMenuButton。我想要的是当我选择菜单上的任何项目时，不应关闭弹出窗口，而是让我从弹出窗口中选择多个值。文档说您可以覆盖 handleTap 属性，但我不清楚该怎么做那？ 这是记录在案的

 ///The [handleTap] method can be overridden to adjust exactly what happens when
/// the item is tapped. By default, it uses [Navigator.pop] to return the
/// [PopupMenuItem.value] from the menu route.

    void handleTap() 
    Navigator.pop<T>(context, widget.value);
  

【参考方案1】：

创建一个自定义类，比如PopupItem，它扩展PopupMenuItem 并覆盖PopupMenuItemState.handleTap 方法。

class PopupItem extends PopupMenuItem 
  const PopupItem(
    required Widget child,
    Key? key,
  ) : super(key: key, child: child);

  @override
  _PopupItemState createState() => _PopupItemState();


class _PopupItemState extends PopupMenuItemState 
  @override
  void handleTap() 

您现在可以像这样使用它：

PopupMenuButton(
  itemBuilder: (_) 
    return [
      PopupItem(child: ...),
    ];
  ,
)

【讨论】：

如何在有状态小部件中使用它来更新显示？例如，带有复选框列表的菜单。用户单击复选框，值从开/关切换并在屏幕上更新？

@James 肯定不是 cmets 可以解释的。

@James 您还可以从从 PopupMenuItemState 扩展的自定义类中覆盖方法 buildChild() 并将 null 传递给 PopupMenuItem 的子字段。

【参考方案2】：

所以我有一个必须要做的要求

使用带有可检查项目的下拉菜单创建表单域

所以我用 PopupMenuItem 创建了一个弹出菜单，但后来遇到了 3 个问题

当一个项目被选中时，弹出窗口被关闭 单击复选框未更新复选框状态 单击文本未更新复选框

所以我像这样解决了所有这些问题，这可能会对你们有所帮助

在 PopupMenuItem 中设置 enabled = false 并使用手势侦听器为单击侦听器包装子项 使用 StatefulBuilder 更新状态 解决方案 1 也解决了这个问题

这里是代码->

   onTapDown: (details) async 
            state.didChange(
              await showMenu(
                    context: context,
                    position: RelativeRect.fromLTRB(
                      details.globalPosition.dx,
                      details.globalPosition.dy,
                      0,
                      0,
                    ),
                    items: itemList.keys
                        .map(
                          (e) => PopupMenuItem(
                            enabled: false,
                            child: StatefulBuilder(
                              builder: (BuildContext context,
                                  StateSetter setState) 
                                return GestureDetector(
                                  onTap: () 
                                    setState(() 
                                      itemList[e] = !itemList[e]!;
                                    );
                                  ,
                                  child: Row(
                                    children: [
                                      Expanded(child: Text(e)),
                                      Checkbox(
                                        value: itemList[e],
                                        onChanged: (i) 
                                          setState(() 
                                            itemList[e] = i!;
                                          );
                                        ,
                                      ),
                                    ],
                                  ),
                                );
                              ,
                            ),
                          ),
                        )
                        .toList(),
                    elevation: 8.0,
                  ).then((value) => null) ??
                  [],
            );
          

【讨论】：

完美运行。但是我面临一个问题，文本显示为灰色，因为小部件被禁用（我在弹出菜单中显示了蓝色的文本）。有没有办法覆盖弹出菜单项中的禁用行为

@RahulSingh 您是否尝试添加文本样式？

在你指出我这样做并且它有效之后。感谢您的帮助

【参考方案3】：

您可以像这样使用 CheckedPopupMenuItem .. 如 Official 文档中所述

PopupMenuButton<Commands>(
      onSelected: (Commands result) 
        switch (result) 
          case Commands.heroAndScholar:
            setState(()  _heroAndScholar = !_heroAndScholar; );
            break;
          case Commands.hurricaneCame:
            // ...handle hurricane option
            break;
          // ...other items handled here
        
      ,
      itemBuilder: (BuildContext context) => <PopupMenuEntry<Commands>>[
        CheckedPopupMenuItem<Commands>(
          checked: _heroAndScholar,
          value: Commands.heroAndScholar,
          child: const Text('Hero and scholar'),
        ),
        const PopupMenuDivider(),
        const PopupMenuItem<Commands>(
          value: Commands.hurricaneCame,
          child: ListTile(leading: Icon(null), title: Text('Bring hurricane')),
        ),
        // ...other items listed here
      ],
    )

【讨论】：

这确实有效，但我想添加一个带有动画的自定义单选按钮，我不希望这个 CheckedPopUpMenu 按钮允许我这样做。顺便说一句，感谢您的回答..

如果我的回答符合您的问题，请投票赞成。我知道你想实现单选按钮而不是 CheckedPopupMenu 按钮，但对于其他用户来说这将是有用的

我刚刚尝试了 CheckedPopUpmenu 按钮，它也不起作用，我不知道为什么，它只是被勾选并且菜单被关闭，我无法选择多个值

【参考方案4】：

@Omi，

我遇到过类似的情况...想要一个 Popup，但不想在我选择 PopupMenuItem 时将其关闭。

我已经实现了这个：

启用→布尔 是否允许用户选择此项。 [...]

我已将菜单项的 enabled 设置为 false（在我的情况下，它是一张具有我的自定义 UI 的卡片）