更多内容请访问：https://harmonyos.51cto.com，与华为官方共建的鸿蒙技术社区1.在介绍之前，虽然上一篇基于HarmonyOSArkUI3.0框架，成功开发了流体布局网络语言，吐槽文档ets组件为什么没有文本输入框。最初并没有提供这样的基础组件。恩，是在HDC大会上体验Ets实例的时候，看到一个好用的输入框，名字叫TextInput，开发工具里并没有提示，然后就尝试用它来为我的Demo提供输入，但是发现了一个问题，当我把文本放在TextInput组件中时，属于绑定@State来定义变量，每次在文本框中输入内容，点击按钮，清除变量值，那么文本输入框也被清除，但是当我再次输入内容的时候，输入文本框会追加上次的内容，估计是TextInput有这个bug，所以一直没有显示在文档上。这里展示的瀑布布局效果，我在HDC大会上也看到过这样的效果，现在想不起来是在哪里看到的了，后来以为文档里有例子或者组件说明，于是又搜索了一下，没找到，后来在网上普及了瀑布布局的原理，才明白其中的道理。因为前端太牛了，没按照原理在eTS上实现，后来想到了FlexDirection.ColumnwithFlexlayout,plusHighlyequipped,效果出来了，但是我觉得不行是一个真正的瀑布布局。我觉得官网文档有开放式布局，一行代码可以有瀑布式布局。目前我会用自己写的效果。简单介绍一下本文的实现效果。在文本输入框中输入图片名称，模糊搜索符合条件的图片，点击搜索按钮，将符合条件的图片添加到下方瀑布布局的组件中。图像在x轴和y轴上的缩放比例从0.5变为1，透明度从0变为1显示。当点击随机删除按钮时，会从下图中随机删除一个，并消失一个沿y轴旋转360度。2.实现效果开发环境效果：https://www.bilibili.com/video/BV1JQ4y1Q7z2/远程模拟器效果：https://www.bilibili.com/video/BV1uq4y1R7vB/3.在这里创建一个工程，如你所愿已经安装最新版的DevEco-Studio开发工具，点击文件->新建->新建项目...弹出创建HarmonyOS项目窗口，这里我选择一个空白的eTS模板进行创建，下面来玩一下声明式开发HarmonyOSArkUI3.0框架。4.界面开发界面由三个组件组成，文本输入框和搜索按钮组合成一个自定义组件，历史记录和随机删除按钮组合成一个自定义组件，滚动组件和多个图片组件组合成自定义组件Components，以及Model结构，初始化数据模型，下面我们从上到下介绍自定义组件：import{PictureData}from'../model/PictureData.ets'import{initOnStartup}from'../model/PictureDataModels.ets'@Entry@ComponentstructPictureList{@StatepictureItems:PictureData[]=initOnStartup()build(){Column(){//文本输入框和搜索按钮组合自定义组件Search_Input({pictureArr:$pictureItems})//历史记录和随机删除按钮组合成一个自定义组件Operation_Picture({pictureArr:$pictureItems})//滚动组件和多个图片组件组合成一个自定义组件Flowlayout_Container({pictureArr:$pictureItems})}.alignItems(Horizo??ntalAlign.Center)}}实现组件内的过渡动画，通过点击搜索按钮或随机删除按钮来控制图片组件的搜索和移除，并呈现过滤移除容器组件的子组件时的动画效果。这里使用了组件过渡动画。简单来说，组件transition主要是通过transition属性方法来配置transition参数。过渡动画会在组件被搜索和移除时执行，需要配合animteTo才能生效。动画时长、曲线、延迟按照animateTo中的配置。文本输入框和搜索按钮的组合，在新建按钮的onClick事件中添加animateTo方法，使下方图片子组件的动画效果生效。@ComponentstructSearch_Input{@StatesearchInput:string=''@LinkpictureArr:PictureData[]build(){Flex({alignItems:ItemAlign.Center}){TextInput({placeholder:'请输入...',text:this.searchInput}).type(InputType.Normal).placeholderColor(Color.Gray).placeholderFont({size:50,weight:2}).enterKeyType(EnterKeyType.Search).caretColor(Color.Green).layoutWeight(8).height(40).borderRadius('20px').backgroundColor(Color.White).onChange((value:string)=>{this.searchInput=value})Button({type:ButtonType.Capsule,stateEffect:false}){文本('查寻').fontSize(17).fontColor(Color.Blue)}.layoutWeight(2).backgroundColor('#00000000').onClick((event:ClickEvent)=>{if(this.searchInput!=null&&this.searchInput.length>0){letthat=this;animateTo({duration:600},()=>{this.pictureArr=this.pictureArr.filter((item,idx,arr)=>item.name.indexOf(that.searchInput)>-1)})this.searchInput='}})}.height(60).padding({left:10}).backgroundColor('#FFedf2f5')}}历史记录和随机删除按钮组合@ComponentstructOperation_Picture{@LinkpictureArr:PictureData[]build(){Flex({alignItems:ItemAlign.Center}){if(this.pictureArr.length>0){Text('history').fontSize(14).fontColor(颜色.Grey).layoutWeight(5)Text('随机删除').textAlign(TextAlign.End).margin({right:30}).fontSize(14).fontColor(Color.Red).layoutWeight(5).onClick((事件:ClickEvent)=>{animateTo({duration:600},()=>{varidx=Math.floor(Math.random()*this.pictureArr.length);this.pictureArr.splice(idx,1)})})}}.height(40).padding({left:20,top:10})}}滚动组件和多个图片组件组合，给图片组件添加两个transition属性，分别用于定义add和remove组件的动态效果，同时设置每张图片的高度，实现瀑布流布局。@ComponentstructFlowlayout_Container{//链接主入口图片数组@LinkpictureArr:PictureData[]privatepicturesHeight:numberaboutToAppear(){lettmpHeight:number;ForEach(this.pictureArr,(item:PictureData)=>{if(item.id%2==0){tmpHeight=Number(tmpHeight)+300;}else{tmpHeight=Number(tmpHeight)+800;}},(item:PictureData)=>item.id.toString())this.picturesHeight=tmpHeight;}build(){//滚动组件Scroll(){//Flex布局，wrap是FlexWrap.Wrap是流式布局0){//循环显示图片到Image组件ForEach(this.pictureArr,(item:PictureData)=>{if(item.id%2==0){Image(item.image).objectFit(ImageFit.Auto).width(px2vp(530)).height(px2vp(300)).margin(2)//搜索过程中的动画.transition({type:TransitionType.Insert,scale:{x:0.5,y:0.5},opacity:0})//删除animation.transition({type:TransitionType.Delete,rotate:{x:0,y:1,z:0,angle:360},scale:{x:0,y:0}})}else{Image(item.image).objectFit(ImageFit.Auto).width(px2vp(530)).height(px2vp(800)).margin(2)//搜索过程中的动画.transition({type:TransitionType.Insert,scale:{x:0.5,y:0.5},opacity:0})//删除时的动画.transition({type:TransitionType.Delete,rotate:{x:0,y:1,z:0,angle:360},scale:{x:0,y:0}})}},(item:PictureData)=>item.id.toString())}}.margin({left:10,top:10,右:10,下:100}).padding({bottom:10}).align(Alignment.TopStart).width(px2vp(1024)).height(px2vp(this.picturesHeight))}}}数据ModelexportclassPictureData{id:number;name:string;image:Resource;constructor(id:number,name:string,image:Resource){this.id=id;this.name=name;this.image=image;}}初始数据方法import{PictureData}from'./PictureData.ets'constPictureArr:any[]=[{id:1,name:'aa1',image:$r("app.media.1")},{id:2,name:'aa2',image:$r("app.media.2")},{id:3,name:'bb3',image:$r("app.media.3")},{id:4,name:'bb4',image:$r("app.media.4")},{id:5,name:'aa1',image:$r("app.media.5")},{id:6,name:'aa2',image:$r("app.media.6")},{id:7,name:'aa3',image:$r("app.media.7")},{id:8,name:'aa4',image:$r("app.media.8")},{id:9,name:'cc1',image:$r("app.media.9")},{id:10,name:'cc2',image:$r("app.media.10")},{id:11,name:'bb3',image:$r("app.media.11")},{id:12,name:'bb4',image:$r("app.media.12")},{id:13,name:'aa1',image:$r("app.media.13")},{id:14,name:'aa2',image:$r("app.media.14")},{id:15,name:'bb3',image:$r("app.media.15")},{id:16,name:'bb4',image:$r("app.media.16")},{id:17,name:'aa1',image:$r("app.media.17")},{id:18,name:'aa2',image:$r("app.media.18")},{id:19,name:'aa3',image:$r("app.media.19")}];exportfunctioninitOnStartup():Array
