更多内容请访问：https://harmonyos.51cto.com与华为官网共建的鸿蒙技术社区1.前言前几天运营小姐姐跟我说，再发几篇文章，估计会影响星光计划创意先锋奖，我看到这么好的东西，哈，开玩笑，我是不是为了那些奖才这么做的，这不是小看我吗，对于这个要求，以我的性格，我当然会直接答应，如果我中奖了，这对每个人都有好处，太好了。于是只好把昨天找到的压箱子底部的宝物内容拿出来，砸了一波大奖。没有人可以阻止我。哈哈，开玩笑的。2.文字隐藏王，全网还没发现既然要获奖，就得拿出点真材实料来，于是打开了尘封已久的文档，令人匪夷所思。看似简单的文字一点都不简单，看得我直冒冷汗。事情是这样的，我们知道几乎所有的控件都是继承自Text为基础的，那么Text里面有什么呢？是他，说吧，说吧，没想到厚眼文也造反了。你不是把Image的工作偷走了吗？根据文档，很容易做出一个控制效果：但是这就结束了吗？现在我想实现如何在程序运行时动态改变图像。3、动态修改上面的图标既然是动态修改，自然要在代码上下功夫。在Text类中查看，有Element相关的接口：哈哈，天哪，这里的参数写的很清楚，我们可以设置上下左右四个方向的图标。话不多说，赶紧试试看，不过这个元素是什么？点进去一看，心凉了半截：原来是超类，怎么用啊，官方文档好像没讲这个。在论坛里搜索了一下，发现了这么一篇宝文：https://harmonyos.51cto.com/posts/8592一句不经意的话解了我的疑惑：原来你有儿子，话不多说，拿来造个Element需要这三个东西，后面两个我不知道，看Resource挺复杂的，然后只能用PixelMap，如何生成一个PixelMap：有几个静态方法，对我来说，没有一个突然，我想到了我用PixelMap的地方。记得小伙伴们应该还记得那篇文章：#星光计划2.0#应用开发-独家发布-相机扫描二维码（Java版）有个图片转换成PixelMap的方法：于是立马想到应该有方法获取Image中的PixelMap，结果是大神帮帮我：//先创建一个imgImageimg=newImage(getContext());//设置媒体资源为img.setPixelMap(ResourceTable.Media_setting_large);//直接取出生成PixelMapElementPixelMapElementpixelMapElement=newPixelMapElement(img.getPixelMap());接下来的事情很简单：Textaccount_text=(Text)findComponentById(ResourceTable.Id_text_helloworld);account_text.setAroundElements(null,pixelMapElement,null,null);后面的效果是这样的：其实这篇文章也回答了今年一月份的一个兄弟的帖子：https://harmonyos.51cto.com/answer/3864.就这个？至此，很多小伙伴都以为完了，nonono我怎么出了一身冷汗，因为我看到了官方文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-tablist-tab-0000001062229749这里是一个置顶tab页，一般新闻，资讯，论坛都会用到这个，我要什么样的效果？想在底部做一个类似的切换效果，这种界面其实很常见。比如微信有官方文档的buff，很快我们就可以做出类似的效果：DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:top_margin="10vp"ohos:left_margin="30vp"ohos:orientation="horizo??ntal">但是仔细看你会发现微信上不仅选中页面的文字会改变颜色，但图标也会改变颜色。它会变色：下一步是见证奇异时刻5.创造按下图片的变色效果。为了实现这一步，最简单的方法就是找两张图片，比如一张彩色一张黑色。在哪里可以找到这种图片？?几乎常见和不常见的图标都可以在这个网站找到：https://www.iconfont.cn/search/index?spm=a313x.7781069.1998910419.28&searchType=icon&q=home&page=1&fromCollection=-1&fills=&tag=选一个你喜欢的图标，点击下载按钮：左侧选择颜色，右侧选择尺寸，下载后放入media目录。只需使用继承：is.setTextColor(defaultColor);}publicvoidsetImage(intnormal_img,intpressed_img){Imageimg=newImage(getContext());img.setPixelMap(normal_img);normal=newPixelMapElement(img.getPixelMap());img.setPixelMap(pressed_img);按下=newPixelMapElement(img.getPixelMap());super.setAroundElements(null,normal,null,null);}publicvoidisSelected(booleanselect){this.setTextColor(select?Color.BLUE:defaultColor);super.setAroundElements(null,select?pressed:normal,null,null);}}这里使用myTab继承TabList中的Tab类，语法就不说了。简而言之，这就足够了。注意两个方法：setImage(intnormal_img,intpressed_img)方法用来设置两张图片，一张是正常未选中状态，另一张是选中状态选项卡被选中。在主程序的tabList中添加事件监听：TabListtabList=(TabList)findComponentById(ResourceTable.Id_main_tabList);myTabtab=newmyTab(tabList,getContext());tab.setText("home");tab.setImage(ResourceTable.Media_home_large,ResourceTable.Media_home_large_pushed);tabList.addTab(tab);myTabtab2=newmyTab(tabList,getContext());tab2.setText("我的");tab2.setImage(ResourceTable.Media_my_large,ResourceTable.Media_my_large_pushed);tabList.addTab(tab2);myTabtab3=newmyTab(tabList,getContext());tab3.setText("setting");tab3.setImage(ResourceTable.Media_setting_large,ResourceTable.Media_setting_large_pushed);tabList.addTab(tab3);tabList.setFixedMode(true);tabList.addTabSelectedListener(newTabList.TabSelectedListener(){@OverridepublicvoidonSelected(TabList.Tabtab){//当一个Tab变为未选中状态时回调myTabmytab=(myTab)tab;mytab.isSelected(true);}@OverridepublicvoidonUnselected(TabList.Tabtab){//Tab从选中状态变为未选中状态时的回调myTabmytab=(myTab)tab;mytab.isSelected(false);}@OverridepublicvoidonReselected(TabList.Tabtab){//当一个Tab已经处于选中状态时，再次点击时的状态回调this.onUnselected(tab);}});大功告成，在模拟器中运行:里面有几张图片先蓝后白，其实就是onReselected(TabList.Tabtab)方法使用上面的方法。我这里的方法是直接变成未选中状态。您也可以选择忽略此方法。根据自己的应用场景灵活使用。六。未解决的问题1.这次使用远程tabList来实现底部文字和图标的切换效果，但是是通过切图实现的。有什么办法可以直接修改图片吗？颜色，希望有人告诉你2.使用原生的TabList方法做出这样一个看起来像PixelMapElement的效果我无法设置图片的大小，所以你会在我的美达资源的图片上看到“大”字样。有什么办法可以设置图片的大小吗？我希望有人能告诉你。3.点击Tab切换页面的效果没有时间关系，本文的重点不在这里。如果你想知道如何切换到真实页面搜索论坛，论坛中有其他高手在TabList中写的例子7。综上所述，本文属于抛砖引玉。主要目的是为了表明一个不经意的发现也可以辐射出奇妙的想法，也许我不认为这对其他人来说没有什么，但是技术是您可以自己理解的东西。之前鸿蒙系统的很多功能，总有网友说有什么用。我想说的是：有什么用，不要问别人，问问自己，有没有一双能真正发现精彩的眼睛。用一张褚掌门表情包给大家打气：更多信息请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com
