Egret入门学习日记 --- 第二十五篇(书中 9.16~9.17 节 内容)

第二十五篇(书中 9.16~9.17 节 内容)

  对于昨天的关于 List 组件使用的问题,我打算到书中提到List之后,再回头补充。

  还有就是 Scroller 的 TileLayout 布局方式,也要去研究一下。

  好了,开始按照书中内容一步一步走。

  开始 9.16节。

  

  

  

  

  

  

  

  

  

  

  重点:

    1、设定TabBar皮肤。

    2、设置TabBar布局。

  操作:

    1、设定TabBar皮肤。

      第一步,准备素材!

      

      第二步,创建 exml 文件!

      

      第三步,拖入组件!约束大小!

      

      第四步,增加两个状态 down 和 up。

      

      第五步:

        设置 down 状态下时,image组件的透明度为 0.5。

        

        设置up状态下时,image组件透明度为1。

        

        设置Label的标签为{data}。

        

      第六步:

        代码实例化 ,并运行。

        

        如果数据格式是这样的怎么办?

        

        我们就要改变 TabBarButtonSkin.exml 文件中的 Label组件的 标签了。

        

        看到效果,完美!

        

        对了,最好默认状态是 up 哦,不然按钮 默认全是 down 状态。

        

        运行效果就相对正常很多了。

        

    2、设置TabBar布局。

      接下来设置布局方式。

      

  至此,9.16节 结束。

  开始 9.17节 。

  

  

  

  

  

  

  

  

  

  

  

  重点:

    1、数据源引用 ArrayCollection 的用法。

    2、渲染 ItemRender 项 如何 设置渲染方式。

    3、DataGroup数据源dataProvider 如何设置。

    4、如何处理 ItemRender 遗留的 labelDisplay的Label组件。

  操作:

    1、数据源引用 ArrayCollection 的用法。

      

    2、渲染 ItemRender 项 如何 设置渲染方式。

      创建一个包装类,继承 eui.ItemRenderer 。     

      

      这样,我们就设定好了 “每一项数据” 渲染出来时呈现的格式了。

    3、DataGroup数据源dataProvider 如何设置。

      既然,ArrayCollection搞定了,ItemRenderer也搞定了。

      那么,就开始 把数据 交给 DataGroup 了。

      

      可以看到,效果已经出来了。

      但是,显示的时候,中间还有 [object Object] 这个东西。

      这是ItemRender 遗留的 问题。来看第四个重点如何解决吧。

    4、如何处理 ItemRender 遗留的 labelDisplay的Label组件。 

      那么,就来解决一下这个遗留的问题。书中也提到了这个问题。

      

      那怎么解决呢?

      

      根据书中所说的方法,我试了一下。

      

      根本没有用。郁闷了。还得解决这个问题。。。啊。。。麻烦。

      运行的时候,明明有看到,的确有这个属性啊。

      

      去了群里问,得到了一位大佬的指点。

        

        

      就是因为我没有声明labelDispaly属性,所以才报错了。

      

      乌龙了,结果是因为TS的问题。。。。。。嘛总算解决了。感谢大佬。

  至此, 9.17节 结束。

  洗澡去。

  哈哈,解决了问题就是爽。

原文地址:https://www.cnblogs.com/dmc-nero/p/11294770.html

时间: 2024-10-11 08:27:33

Egret入门学习日记 --- 第二十五篇(书中 9.16~9.17 节 内容)的相关文章

Egret入门学习日记 --- 第二十四篇(书中 9.12~9.15 节 内容)

第二十四篇(书中 9.12~9.15 节 内容) 开始 9.12节 内容. 重点: 1.TextInput的使用,以及如何设置加密属性. 操作: 1.TextInput的使用,以及如何设置加密属性. 创建exml文件,拖入组件,设置好id. 这是显示密码星号处理的属性. 创建绑定类. 实例化,并运行. 但是焦点在密码输入框时,密码是显示的. 暂时不知道怎么设置 “焦点在密码框上时,还是显示为 * 号” 的方法. 至此,9.12节 内容结束. 开始 9.13节 . 这个,和TextInput的使用

Egret入门学习日记 --- 第二十二篇(书中 9.7~9.8 节 内容)

第二十二篇(书中 9.7~9.8 节 内容) 开始 9.7节 内容. 重点: 1.进度条ProgressBar的声明和使用. 操作: 1.进度条ProgressBar的声明和使用. 现在真的轻车熟路了,很简单.无非就是设置一下最大值,当前值的属性. 然后,事件监听的话,也是一样的.只不过事件名字的话,我就选书中这个事件吧. 可惜不能发动图,不然你们就可以看到这个进度条,每帧+1的速度前进. 当然,如果你想换自定义皮肤,还是老规矩,去找默认的 EXML 文件. 然后,怎么换素材,就按照自己喜欢的换

Egret入门学习日记 --- 第二十八篇(书中 9.19 ~ 9.19 节 内容)

第二十八篇(书中 9.19 节 内容) 没想到第九章的组件篇可真是够长的,没事,慢慢来吧. 开始 9.19节. 重点: 1.创建一个Tips提示组件. 操作: 1.创建一个Tips提示组件. 哇!出大问题!这个Tips组件有点牛皮!怎么办? 书中内容这部分,我直接懵逼. 还有这部分也是. 一点一点来分析好吧. 好,开始分析一波. 第一步:查看最终展示效果. 这是最终效果.(我去,我现在才知道,原来博客园的编辑器还可以放Gif图片...) 第二步:这个黑色的弹框组件本质上是由什么构成的? 可见,在

Egret入门学习日记 --- 第二十三篇(书中 9.9~9.11 节 内容)

第二十三篇(书中 9.9~9.11 节 内容) 今天,来9.9节. 重点: 1.VSlider的声明和使用. 操作: 1.VSlider的声明和使用. 其实和HSlider的使用方式差不多. 至此,9.9节 内容结束. 开始 9.10节. 重点: 1.配合TextureMerger,生成艺术字图集资源. 2.导入艺术字资源,并使用. 3.调整艺术字间距. 操作: 1.配合TextureMerger,生成艺术字图集资源. 打开TextureMerger,选择Bitmap Font . 点击添加字符

Egret入门学习日记 --- 第三十六篇(书中 10.7 ~ 10.8 节 内容)

第三十六篇(书中 10.7 ~ 10.8 节 内容) 开始 书中 10.7 节内容. 书中 10.7 节内容结束. 书中重点: 1.导出素材. 2.配置粒子库. 3.播放动画. 开始操作: 1.导出素材. 我设置好了雪花的效果. 接着是导出. 这是导出后的资源文件. 导入Egret的预加载资源组中. 2.配置粒子库. 下载好官方的粒子库. https://github.com/egret-labs/egret-game-library 拷贝粒子库到项目外,记住 项目文件夹外! 配置好 egret

Egret入门学习日记 --- 问题汇总

问题1: 图片无法拖入到 EXML 文件的问题 在日记 第六篇 有记载:https://www.cnblogs.com/dmc-nero/p/11188975.html 位于 3.6节 内容. 问题2: 关于 组件 Mask 的用法问题 在日记 第十五篇 有记载:https://www.cnblogs.com/dmc-nero/p/11237340.html 位于 6.7节 内容. 原文地址:https://www.cnblogs.com/dmc-nero/p/11247370.html

Egret入门学习日记 --- 第五篇

第五篇 今天得把明天的问题解决了才行. 去了Q群,碰到一位大大,他给我解惑了.Thanks?(?ω?)? 这是我之前按照书上写的方式写的,并没有效果. 然后大大给我解答了: 后来我就改了一下: 可以看到,有效果了.关键点就在两点: 1.书中所说的childrenCreated方法根本没用. 2.在绑定this.skinName 皮肤之前,要先监听 控件加载完成后 事件. 什么意思呢?我来一一说明: 第一点: 是的,书中所说的childrenCreated的确没用. 可以看到,我把children

Egret入门学习日记 --- 第六十四篇(书中 19.4 节 内容)

第六十四篇(书中 19.4 节 内容) 昨天的问题,是 images 库自己本身的问题. 我单独使用都报错. 这是main.js文件代码: let images = require("images"); console.log(images); 这是cmd运行命令历史: Microsoft Windows [版本 10.0.16299.15] (c) 2017 Microsoft Corporation.保留所有权利. C:\Users\Administrator\Desktop\a&

Egret入门学习日记 --- 第十一篇(进阶篇)

第十一篇(进阶篇) 好了,到了这篇开始,前三章都记录完了. 接下来就是到第四章了. 4.1节 的内容总结一下重点: 1.resource目录下default.res.json文件,可以查看资源的使用状态,分组的情况. 2.preload是自带模板提供的一个资源组,是预加载的资源.意味着这个组资源越多,前期加载越慢. 跟着做: 1. 这是我现在看到的 default.res.json文件 的界面. 2. 这就是 preload资源组 以及 组里的内容. 至此,4.1节 内容完毕. 接下来 4.2节