UG4L22——弹出功能

本章代码关键字

GRoot.inst.ShowPopup()                //弹出组件，该组件点击空白处时会隐藏
GRoot.inst.HidePopup()                //隐藏弹出的组件
gObject.onRemovedFromStage.Add()    //当弹出的组件关闭时会执行的委托
PopupMenu                            //弹出菜单
new PopupMenu()                        //如果不传入参数就默认使用全局资源弹出菜单，如果需要使用特定的资源需要传入该资源的URL
UIConfig.popupMenu                    //默认的弹出菜单资源
popupMenu.AddItem()                    //为弹出菜单添加选项及其监听函数，返回监听按钮
popupMenu.Show()                    //显示弹出菜单
popupMenu.SetItemGrayed()            //将弹出菜单的某个选项置灰

弹出功能

在UI系统中我们经常需要弹出一些组件，这些组件在用户点击空白地方的情况下就会自动消失，FairyGUI内置了这个功能

例如右键菜单，下拉菜单等等

弹出API

1. 弹出一个组件

   该弹出组件并不是创建组件，只是将创建出来的组件在特定位置显示，并添加点击空白就隐藏的逻辑

   1. 弹出在当前鼠标位置

      ​GRoot.inst.ShowPopup()​的第一个参数传入要弹出的组件，例如按下按钮后弹出一个标签

      TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
      //这里已经加载过teach包
      GLabel label = UIPackage.CreateObject("teach", "MyLabel").asLabel;
      label.text = "弹出内容";
      panel.m_btnTest.onClick.Add(() =>
      {
          GRoot.inst.ShowPopup(label);
      });

      该方法弹出的组件会自动将组件调整到合适位置，如果你在屏幕外围点击弹出，组件调整到能够完整显示的位置
      点击空白处，弹出的组件会自动隐藏（注意是隐藏不是销毁）

      值得一提的是，如果多次对一个弹出组件调用弹出方法，那么并不会出现多个组件，而是将弹出组件转移到另一个地方

      显示效果：​

   2. 弹出在指定元件下

      ​GRoot.inst.ShowPopup()​的第一个参数传入要弹出的组件，第二个参数传入要弹出到哪个元件下

      TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
      //这里已经加载过teach包
      GLabel label = UIPackage.CreateObject("teach", "MyLabel").asLabel;
      label.text = "弹出内容";
      panel.m_btnTest.onClick.Add(() =>
      {
          GRoot.inst.ShowPopup(label, panel.m_graphTest);
      });

      显示效果：​

   3. 弹出在自定义位置

      弹出后手动调整位置即可

      TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
      //这里已经加载过teach包
      GLabel label = UIPackage.CreateObject("teach", "MyLabel").asLabel;
      label.text = "弹出内容";
      panel.m_btnTest.onClick.Add(() =>
      {
          GRoot.inst.ShowPopup(label);
          label.SetXY(0, 0);
      });

      显示效果：​

   4. 弹出窗口（和正常显示窗口唯一区别就是多了点击空白关闭的功能，其它用法没有任何区别）

      TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
      //这里已经加载过teach包
      Window window = new Window();
      window.contentPane = UIPackage.CreateObject("teach", "WindowTest").asCom;
      panel.m_btnTest.onClick.Add(() =>
      {
          GRoot.inst.ShowPopup(window);
      });

      显示效果：​

2. 关闭弹出内容

   该方法会自动将弹出的组件隐藏起来，而无需点击空白区域，该方法不需要传入组件

   void Update()
   {
       if (Input.GetKeyDown(KeyCode.A))
       {
           GRoot.inst.HidePopup();
       }
   }

3. 弹出组件关闭通知事件

   当弹出的组件关闭时，会执行onRemovedFromStage​的委托

   TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
   //这里已经加载过teach包
   GLabel label = UIPackage.CreateObject("teach", "MyLabel").asLabel;
   label.text = "弹出内容";
   panel.m_btnTest.onClick.Add(() =>
   {
       GRoot.inst.ShowPopup(label);
   });
   label.onRemovedFromStage.Add(() =>
   {
       print("从舞台移除出去了");
   });

   当关闭弹出组件时（包括点击空白区域或者代码关闭）：

   ​​

弹出右键菜单栏功能

1. 在编辑器中制作菜单组件 菜单栏 ——> 资源 ——> 新建弹出菜单

   ​​

2. 设置相关参数

   ​​

3. 在Unity中的使用

   1. 设置全局菜单资源

      需要使用UIConfig.popupMenu​设置，传入资源的URL地址

      TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
      //需要加载对应的teach包
      UIPackage.AddPackage("UI/teach");
      UIConfig.popupMenu = "ui://teach/PopupMenu";

   2. 创建菜单栏对象

      直接使用构造函数创建即可，如果不传入参数就默认使用全局资源，如果需要使用特定的资源需要传入该资源的URL

      TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
      //需要加载对应的teach包
      UIPackage.AddPackage("UI/teach");
      UIConfig.popupMenu = "ui://teach/PopupMenu";
      PopupMenu menu = new PopupMenu();
      menu.contentPane.width = 100;        //设置菜单的宽

   3. 添加菜单选项并设置回调函数

      使用popupMenu.AddItem​方法来添加菜单选项，参数一是选项名，参数二是点击按钮后执行的回调函数
      该方法可以返回被创建出来的选项按钮，我们可以通过返回的按钮来设置其名字，或者是否置灰不得点击等等

      TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
      //需要加载对应的teach包
      UIPackage.AddPackage("UI/teach");
      UIConfig.popupMenu = "ui://teach/PopupMenu";
      PopupMenu menu = new PopupMenu();
      menu.contentPane.width = 100;
      
      GButton btn1 = menu.AddItem("测试一", (obj) =>
      {
          //通过传入的参数的data属性，我们可以知道点击了哪个选项
          print((obj.data as GButton).name);
          print("执行测试一的逻辑");
      });
      btn1.name = "测试1";
      
      menu.AddItem("测试二", (obj) =>
      {
          print("执行测试二的逻辑");
      });

   4. 实现弹出菜单的逻辑

      想要显示弹出菜单，只需要执行Show​方法即可

      TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
      //需要加载对应的teach包
      UIPackage.AddPackage("UI/teach");
      UIConfig.popupMenu = "ui://teach/PopupMenu";
      PopupMenu menu = new PopupMenu();
      menu.contentPane.width = 100;
      menu.AddItem("测试一", (obj) =>
      {
          //通过传入的参数的data属性，我们可以知道点击了哪个选项
          print((obj.data as GButton).name);
          print("执行测试一的逻辑");
      });
      menu.AddItem("测试二", (obj) =>
      {
          print("执行测试二的逻辑");
      });
      //点击右键弹出右键菜单
      panel.onTouchBegin.Add((obj) =>
      {
          if (obj.inputEvent.button == 1)
              menu.Show();
      });

   显示效果如下：​

   点击按钮输出：​

设置按钮置灰

如果想要让某个选项是置灰状态，不可选择，需要先获取选项按钮的名字，
再通过popupMenu.SetItemGrayed​来设置是否置灰，参数一传入按钮的名字，参数二传入ture​就是置灰

例如设置按钮三置灰

UIPackage.AddPackage("UI/teach");
UIConfig.popupMenu = "ui://teach/PopupMenu";
PopupMenu menu = new PopupMenu();
menu.contentPane.width = 100;
GButton btn1 = menu.AddItem("测试一", (obj) =>
{
    //通过传入的参数的data属性，我们可以知道点击了哪个选项
    print((obj.data as GButton).name);
    print("执行测试一的逻辑");
});
btn1.name = "测试1";
menu.AddItem("测试二", (obj) =>
{
    print("执行测试二的逻辑");
});
//设置按钮三置灰
GButton btn3 = menu.AddItem("测试三", (obj) =>
{
    print("执行测试三的逻辑");
});
btn3.name = "测试3";
menu.SetItemGrayed("测试3", true);
//点击右键弹出右键菜单
panel.onTouchBegin.Add((obj) =>
{
    if (obj.inputEvent.button == 1)
        menu.Show();
});

显示效果：​