【Unity之FGUI】白仙章Fairy GUI控件详解二

---

👨‍💻个人主页 ：@元宇宙-秩沅

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 秩沅 原创
👨‍💻 收录于专栏 ：就业宝典

⭐🅰️推荐专栏⭐

⭐-[今日信息差点击进入⭐

---

---

文章目录

• • ⭐前言⭐
  • • 😶‍🌫️8.按钮（一个扩展组件）
    • 😶‍🌫️9.单选和复选按钮
    • 😶‍🌫️10.进度条（本质：组件）
    • 😶‍🌫️11.滑动条（本质：组件）
    • 😶‍🌫️12.滚动条（本质：组件）
    • 😶‍🌫️13.滚动容器（本质：组件）
    • 😶‍🌫️14.列表（本质：组件）
    • 😶‍🌫️15.下拉框（本质：组件）
  • 🪶（==快捷键==）
  • ⭐🅰️⭐

---

⭐前言⭐

---

😶‍🌫️8.按钮（一个扩展组件）

---

+ 文本标题和图形标题勾选后

• 四个状态（未按，按下，进入，退出）
  
• 元件功能属性
  

   

        //1.获取按钮控件
        GButton btn = view.GetChild("按钮名").asButton;
        btn.text = "按钮的内容";
        btn.icon = "ui://xx/xxxx";//图标

        GObject obj = view.GetChild("按钮名");
        obj.text = "";
        obj.icon = "ui://xx/xxxx";

• 若面板上未如此设置，则通过以下代码动态创建

        //2.音效相关设置
        UIConfig.buttonSound =   (NAudioClip)UIPackage.GetItemAssetByURL("ui://xx/xxx");
        //设置默认音效,放在显示面板之前，不在这里
        UIConfig.buttonSoundVolumeScale = 0.5f;   //设置音效大小
        GRoot.inst.EnableSound();   //开启音效
        GRoot.inst.DisableSound();  //关闭音效      
        GRoot.inst.soundVolume = 0.5f;  //调整全局声音大小 ，包括 按钮 和 动效
        //3.事件监听相关
        btn.onClick.Add(() =>
        {
            print("按钮被点击");
        });
        btn.FireClick(true, true);        //通过代码控制是否触发按钮
        btn.onClick.Call();     //触发按钮中监听的函数 但是没有点击效果

---

😶‍🌫️9.单选和复选按钮

---

• 复选按钮
  
• 单选按钮

①需要添加一个控制器

②点击连接

③即可形成互斥效果的单选按钮

 UIConfig.buttonSound = (NAudioClip)UIPackage.GetItemAssetByURL("ui://Teach/btnMusic"); 
 //设置默认音效
 UIConfig.buttonSoundVolumeScale = 0.5f;
 GComponent view = UIPackage.CreateObject("包名", "组件名").asCom;
 GRoot.inst.AddChild(view);
 //1.获取单选和多选框
 GButton check = view.GetChild("按钮名").asButton;
 GButton radio = view.GetChild("按钮名").asButton;
 check.selected = true; //改变选中状态
 radio.selected = true; //改变选中状态
 Controller c = view.GetController("控制器名字"); //单选按钮来 建议通过获取控制器去切换选择状态
 c.selectedIndex = 1;

 //2.事件相关
 checkBox.onChanged.Add(() =>
 {
     print("状态现在为" + check.selected);
 });

---

😶‍🌫️10.进度条（本质：组件）

---

• 原理：就是按进度改变一个元件的宽度、高度或填充比例
• 自动创建
  

• 手动创建规则：

在组件中按特定规则添加元件即可制作为进度条

组件中关键元件名内部规则：

• bar：横向进度条改变宽度的元件。处于最大值时的宽度（可以是任意类型元件）
• bar_v: 纵向进度条改变高度的元件。
• title: 用于显示进度的标题，可以是装载器，标签，按钮
• ani:如果进度条是序列帧动画，则0~100对应动画的帧索引

注意：设置bar的宽度为进度条，设置bar_v的高度为进度条处于最大值时的高度（可以是任意类型元件）

• API相关：

    //1.设置默认音效
    UIConfig.buttonSound = (NAudioClip)UIPackage.GetItemAssetByURL("ui://包名/音效名");
    UIConfig.buttonSoundVolumeScale = 0.8f;
    GComponent view = UIPackage.CreateObject("包名", "组件名").asCom;
    GRoot.inst.AddChild(view);
    //2.获取进度条
    GProgressBar pb = view.GetChild("进度条名").asProgress;
    //3.改变进度
    pb.value = 30;
    pb.TweenValue(100, 3); //让进度3秒内缓慢的变到100 

---

😶‍🌫️11.滑动条（本质：组件）

---

• 滑动条与进度条相似，滑动条只是增加了一个按钮

• 组件中关键元件名规则：

   bar：横向滑动条改变宽度的元件。
   bar_v: 纵向滑动条改变高度的元件。        title: 用于显示进度的标题，可以是文本、装载器，标签，按钮
   grip:用于拖动的按钮

注意：

①设置bar_v的高度为滑动条处于最大值时的高度（可以是任意类型元件）

②grip按钮应该与bar对象建立一个关联，并放置在进度条处于最大值时的位置。这个关联是：

③正向：grip左左关联到bar或者顶顶关联到bar_v；

④反向：grip顶顶关联到bar或者底底关联到bar_v。

 //1.获取滑动条
 GSlider slider = view.GetChild("滑动条名").asSlider;
 //2.改变进度
 slider.value = 100;
 //3.事件
 slider.onChanged.Add(() =>
 {
     print(slider.value);
 });

---

😶‍🌫️12.滚动条（本质：组件）

---

• 需要配合滚动容器使用，是可选控件

• 自动创建
  
  

• 手动创建

    组件中关键元件名规则
    arrow1（可选）：垂直滚动条时，代表上侧的按钮
    arrow2（可选）：垂直滚动条时，代表下侧的按钮
    grip：表示滚动条中间的滑块按钮
    bar：限制区域，作占位用途

• 需要配合滚动容器使用，现在还不可使用
  

---

😶‍🌫️13.滚动容器（本质：组件）

---

• 组件的溢出处理设置为" 滚动"，那么该组件就成为了滚动容器

• 属性相关：

  滚动条显示：默认勾选

  边缘回弹效果：默认勾选

  触摸滚动效果：默认勾选

• 页面模式：

  以视口大小为页面大小，每次滚动的距离是一页。一般在移动平台上使用，PC上较少，拖动滚动条进行滚动操作与这个模式冲突。

• 浮动显示：

  勾选后，滚动条不占据视口的位置，而是直接覆盖在视口上面。例如一个适用于手机的滚动条，它是细条且半透明的，只在滚动时才显示出来，用于提示滚动位置。那么我们把它设置为"浮动"，这样就不会挤占视口的显示空间。

• 简单效果

• 相关API

        //1.获取滚动容器
        ScrollPane scrollPanel;
        GComponent scroll = view.GetChild("滚动条名").asCom;
        scrollPanel = scroll.scrollPane;
        //2.滚动位置设置
        scrollPanel.posY = 0;
        scrollPanel.SetPercY(0.5f, true);  //按百分比滚动
        print(scrollPanel.viewWidth); //视口宽高
        print(scrollPanel.viewHeight);
        print(scrollPanel.contentWidth); //内容宽高
        print(scrollPanel.contentHeight);
        scrollPanel.ScrollToView() //设置指定元件出现在视口内
        scrollPanel.touchEffect = true;//触摸功能开关
        //3.事件相关
        scrollPanel.onScroll.Add(() =>  //当滚动视图位置改变时 
        {});
        scrollPanel.onScrollEnd.Add(() =>  //惯性移动停止回调
        { });
        scrollPanel.onPullDownRelease.Add(() =>  //下拉刷新回调
        {  });
        scrollPanel.onPullUpRelease.Add(() =>     //上拉刷新回调
        {});

---

😶‍🌫️14.列表（本质：组件）

---

组件的一种特殊扩展

在组件的基础上加入排序相关的功能

相关属性

• 渲染顺序拱形：自定义一个索引显示在最前面，两侧的依次渲染
• 选择控制：
  可以和控制器联动，这样当列表选中项目发生改变时，控制器也同时跳转到相同索引的页面
• 分页控制：
  可以绑定一个控制器。当列表发生翻页滚动时（溢出处理必须为三种滚动之一，滚动必须勾选为页面模式），控制器也同时跳转到相同索引（页码）的页面。反之亦然，如果控制器跳转到某个页面，那么列表也同时滚动到相同索引（页码）的页面。
• 项目资源
  
• 编辑列表
  
• 自动调整列表项目大小（默认不勾选，勾选可能会拉伸图像）
  

        //默认竖直滚动条
        UIConfig.verticalScrollBar = "ui://包名/列表名";
        GComponent view = UIPackage.CreateObject("包名", "组件名").asCom;
        GRoot.inst.AddChild(view);
        //1.获取列表
        GList list = view.GetChild("列表名").asList;
        //2.组件的 添加和移除
        GObject obj = list.AddChild(UIPackage.CreateObject("包名", "图片名"));
        list.RemoveChild(obj);//移除列表
        obj.Dispose();//销毁

        //从列表缓存池池中取出或新建对象添加到列表中
        
        GObject obj3 = list.AddItemFromPool()//池子里new 个对象
        list.RemoveChildToPool(obj3); //删除一个item，并将对象返回池中
        list.AddItemFromPool();     //现在池子里面有一个对象 会直接取出来        
        list.RemoveChildToPoolAt(0);//删除指定位置item，并返回池中
        list.RemoveChildrenToPool();//删除一个范围内的item，或者全部删除，返回池子
         list.RemoveChildrenToPool(0,50);  //移除指定索引位置的对象                   
         list.GetFromPool("url地址")//从池中取出对象,并不会添加到列表中
          ReturnToPool//将对象返回池中,并不会从列表中移除

        //3.使用回调函数修改列表
        list.itemRenderer = RenderListItem;
        list.numItems = 20; //自动创建20个对象，在委托函数中进行初始化操作       
        list.numItems = 10; //每次重新赋值 会留下10个对象 多余的对象 放入池子中
        list.numItems = 20;//如果在重新变成20 多出来的10个 是之前放入池子的10个      
       list.ResizeToFit(); //重置大小
        //4.事件相关
        list.onClickItem.Add((obj) =>
        {
            print((obj.data as GObject).text);
        });
    private void RenderListItem(int index, GObject obj)//作为回调函数
    {
        //初始化创建的每一个对象
        obj.text = index.ToString();
    }
}

• 虚拟列表和循环列表

虚拟列表，节约性能，如要创建1000个显示物件，但是列表中只能显示20个，每次滑动时，只更新这20个物件，达到显示1000个的效果

虚拟列表使用的前提条件

    1.必须要定义itemRenderer
    2.必须要开启滚动相关
    3.一开始就要把项目资源设置好 或者 我们可以通过代码设置项目资源

list.defaultItem = "通过url地址去关联项目资源";

• 开启虚拟列表

         list.SetVirtual();

• 循环列表只支持 单行或者单列布局，不支持流动布局和分页布局

若列表循环20个，则滚动列表一直是重复这二十个物件

        list.SetVirtualAndLoop();
        list.numItems = 20;

---

😶‍🌫️15.下拉框（本质：组件）

---

• 自动创建
  
  

• 手动创建

1.弹出组件的构成：背景图（与list宽高关联）+垂直滚动列表（命名为list并关联好项目资源）

2.button 下拉框需要一个按钮控制器（下拉框点击展开时，保持在down页，收回时保持在up也或over页）

3.title 可以是普通文本、富文本、标签、按钮

• 相关API

  //1.获取下拉框
  GComboBox comboBox = view.GetChild("下拉框的而名字").asComboBox;
  //2.代码初始化内容
  comboBox.items = new string[] { "选1", "选2" , "选3" , "选4" };
  comboBox.icons = new string[] { "ui://包名/图片1", "ui://包名/图片2", "ui://包名/图片3", "ui://包名/图片4" };
  comboBox.values = new string[] { "11", "22", "33", "44" };
  
  print(comboBox.selectedIndex);  //通过索引通过他就可以得到 内容 图标 值
  print(comboBox.value);  //值 快捷获取值
  comboBox.selectedIndex = 2;  //通过索引设置
  comboBox.value = "44";  //通过值设置
  GRoot.inst.HidePopup();//代码关闭弹出项
  //3.事件相关
  comboBox.onChanged.Add(() =>
  {
      print("下拉框改变了" + comboBox.selectedIndex + "_" + comboBox.items[comboBox.selectedIndex]);
  });
  

---

🪶（快捷键）

---

• 拖动视图：鼠标滚轮
• 重命名组件：F2
• 成组：ctrl + G

⭐🅰️⭐

---

⭐【Unityc#专题篇】之c#进阶篇】

⭐【Unityc#专题篇】之c#核心篇】

⭐【Unityc#专题篇】之c#基础篇】

⭐【Unity-c#专题篇】之c#入门篇】

⭐ 【Unityc#专题篇】---进阶章题单实践练习

⭐【Unityc#专题篇】---基础章题单实践练习

⭐ 【Unityc#专题篇】---核心章题单实践练习

---

你们的点赞👍 收藏⭐ 留言📝 关注✅是我持续创作，输出优质内容的最大动力！、

---

---