更多信息请访问：https://harmonyos.51cto.com，与华为官方共同打造的鸿蒙技术社区在介绍之前，先说下为什么文档的Ets组件没有文本输入框。没有先提供这样的基础组件。幸运的是，在HDC大会上体验Ets实例的时候，看到了一个很好用的输入框，叫做TextInput。开发工具是没有提示的，然后我尝试用它来为我的Demo提供输入，但是我发现了一个问题，当我把TextInput组件中的文本作为绑定的@State定义变量时，每次输入文本框中的内容，点击按钮，清除变量值，此时文本输入框也被清除，但是当我再次输入内容时，输入文本框会追加最后的内容，可能是因为TextInput有这个bug，所以文档上没有显示。简单介绍一下本文的实现效果。在文本输入框中输入互联网流行语，点击添加按钮，将互联网流行语添加到下方流式布局的组件中。文字在x轴和y轴上从0.5到1缩放，透明度从0到1显示，当点击随机删除按钮时，将随机删除以下网络流行语之一，并旋转消失沿y轴的360度。2、实现效果3、创建工程假设你已经安装了最新版的DevEco-Studio开发工具，点击文件->新建->新建工程...弹出创建HarmonyOS工程窗口。这里我选择一个空白的eTS模板进行创建，然后点击Let'splaywiththeDeclarativedevelopmentofHarmonyOSArkUI3.0framework。4.界面开发界面由三部分组成。文本输入框和新建按钮组合成一个自定义组件，历史记录和随机删除按钮组合成一个自定义组件。组件、滚动组件和多个文本组件组合成一个自定义组件。下面从上到下介绍一下自定义组件：@Entry@ComponentstructSearch_FlowLayout{@StatehistoryArr:string[]=[《人生如戏》，《养猪》《我们有才》，《忍者高》，《我不会》细胞不坏就学不好”、“你带钱”、“我消极对待减肥”、“我宁愿骄傲发霉”、“接下来的事情要么是故事，要么是意外”、“做脚踏实地”、“但钱买不来”、“拍脑袋做决定”、“我笑完就睡觉”、“有钱人都是大叔”、“但是不还钱的更惨”]build(){Column(){//将文本输入框和新按钮组合成自定义组件Search_Input({historyArr:$historyArr})//历史记录和随机删除按钮组合成一个自定义组件Clear_History({historyArr:$historyArr})//滚动组件和多个文本组件组合成一个自定义组件)}.alignItems(Horizo??ntalAlign.Center)}}实现组件内的过渡效果，通过点击新建按钮或随机删除按钮来控制Text组件的添加和删除，并在点击时呈现动态效果添加和删??除容器组件的子组件。这里使用了组件过渡动画。简单来说，组件transition主要是通过transition属性方法来配置transition参数。当添加或移除组件时，会执行过渡动画，需要配合animteTo才能生效。动画时长、曲线、延迟按照animateTo中的配置。文本输入框和新建按钮合并，在新建按钮的onClick事件中添加animateTo方法，使下方Text子组件的动画生效。@ComponentstructSearch_Input{//存放文本输入框的内容@StatehistoryInput:string=''//链接主词条历史记录数组@LinkhistoryArr:string[]build(){//Flex布局，居中显示Flex({alignItems:ItemAlign.Center}){//文本输入框TextInput({placeholder:'请输入...',text:this.historyInput}).type(InputType.Normal).placeholderColor(Color.Gray).placeholderFont({尺寸：50，重量：2}).enterKeyType(EnterKeyType.Search).caretColor(Color.Green).layoutWeight(8).height(40).borderRadius('20px').backgroundColor(Color.White).onChange((value:string)=>{this.historyInput=value})//新的互联网术语按钮Button({type:ButtonType.Capsule,stateEffect:false}){Text('New').fontSize(17).fontColor(Color.Blue)}.layoutWeight(2).backgroundColor('#00000000').onClick((event:ClickEvent)=>{if(this.historyInput!=null&&this.historyInput.length>0){//添加animateTo方法,来让Text组件子组件的动画效果animateTo({duration:600},()=>{this.historyArr.unshift(this.historyInput)})}this.historyInput=''})}.height(60).padding({left:10}).backgroundColor('#FFedf2f5')}}历史和随机删除按钮结合@ComponentstructClear_History{//链接主入口历史记录数组@LinkhistoryArr:string[]build(){Flex({alignItems:ItemAlign.Center}){if(this.historyArr.length>0){Text('history').fontSize(14).fontColor(Color.Grey).layoutWeight(5)Text('随机删除').textAlign(TextAlign.End).margin({right:30}).fontSize(14).fontColor(Color.Red).layoutWeight(5).onClick((event:ClickEvent)=>{//添加animateTo方法使Text组件子组件动画生效//随机删除一个animateTo({duration:600},()=>{varidx=Math.floor(Math.random()*this.historyArr.length);this.historyArr.splice(idx,1)})})}}.height(40).padding({left:20,top:10})}}滚动组件和多个文本组件组合，在Text组件中添加两个transition属性，分别用于定义组件的添加和移除动态效果@ComponentstructFlowlayout_Container{//链接主入口历史记录数组@LinkhistoryArr:string[]build(){//滚动组件Scroll(){//Flex布局，wrap为FlexWrap.Wrap为流式布局Flex({justifyContent:FlexAlign.Start,wrap:FlexWrap.Wrap}){if(this.historyArr.length>0){//循环显示网络术语到文本组件ForEach(this.historyArr,(item:string)=>{Text(`${item}`).fontSize(18).borderStyle(BorderStyle.Solid).borderWidth('1px').borderColor('#dddddd').borderRadius('90px').padding({top:4,bottom:4,right:10,left:10}).margin({top:10,right:10}).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(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:string)=>item.toString())}}.margin({left:20,right:10,bottom:100}).padding({bottom:10})}}}介绍到此结束化。声明式开发，是不是简单了很多，我们一起开始吧。更多信息请访问：Harmonyos.51cto.com，与华为官方合作打造的鸿蒙技术社区
