基于HarmonyOS ArkUI 3.0框架，我成功开发了流式布局网络语-51CTO.COM

[[432515]]

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

一、前言

在介绍之前，吐槽一下为什么文档Ets组件里没有文本输入框，这么基础的组件都不先提供的，好的当时在HDC大会体验Ets实例时，见到有用输入框，名叫TextInput，在开发工具是没有提示的，然后我也尝试用它来为我的Demo提供输入，然而发现个问题，当我把TextInput组件里的text属于绑定@State 定义变量时，每次在文本框输入内容，点击按钮，清空变量值，这时文本输入框也清空了，但当我再次输入内容时，输入文本框会追加上次的内容，估计是因为TextInput有这个Bug，所以还没有在文档上显示出来。

简单介绍一下本文的实现效果，在文本输入框输入流行网络用语，点击新增按钮，把流行网络用语添加到下面流式布局的组件里，文以x、y轴缩放从0.5变化到1，透明度从0到1 显示出来，点击随机删除按钮时，从下面流行网络用语中随机删除一个，并且以沿y轴旋转360度消失。

二、实现效果

基于HarmonyOS ArkUI 3.0 框架，我成功开发了流式布局网络语-鸿蒙HarmonyOS技术社区

三、创建工程

在这当作你已经安装好最新版本DevEco-Studio开发工具, 点击File -> New -> New Project… 弹出Create HarmonyOS Project窗口, 这里我选择空白eTS模板创建, 下来就跟着一起玩转HarmonyOS ArkUI 3.0 框架声明式开发吧.

四、界面开发

界面有三个组件组合而成，文本输入框和新增按钮组合成一个自定义组件，历史记录和随机删除按钮组合成一个自定义组件，滚动组件和多个文本组件组合成一个自定义组件，下面我们分别从上到下来介绍自定义组件：

@Entry 
@Component 
struct Search_FlowLayout { 
  @State historyArr:string[] = ["人生如戏", "养猪才洋气", "忍为高", "牢房不倒我不学好", "你带着钱", "我消极对待减肥", "宁可高傲的发霉", "接下来的不是故事就是事故", "脚踏实地的干", "可是用钱却买不到", "拍脑袋决策", "笑完我就去睡觉", "有钱的都是大爷","但是欠钱不还的更是"] 
 
  build() { 
    Column() { 
      // 文本输入框和新增按钮组合自定义组件 
      Search_Input({historyArr: $historyArr}) 
      // 历史记录和随机删除按钮组合成自定义组件 
      Clear_History({historyArr: $historyArr}) 
      // 滚动组件和多个文本组件组合成自定义组件 
      Flowlayout_Container({historyArr: $historyArr}) 
    } 
    .alignItems(HorizontalAlign.Center) 
  } 
}

实现组件内转场动效，通过点击新增按钮或随机删除按钮来控制Text组件的添加和移除，呈现容器组件子组件添加和移除时的动效。

这里用到组件转场动画，简单说一下组件转场主要通过transition属性方法配置转场参数，在组件添加和移除时会执行过渡动效，需要配合animteTo才能生效。动效时长、曲线、延时跟随animateTo中的配置。

文本输入框和新增按钮组合，在新增按钮的onClick事件中添加animateTo方法，来使下面Text子组件动效生效。

@Component 
struct Search_Input { 
  // 存储文本输入框内容 
  @State historyInput: string = '' 
  // 链接主入口历史记录数组 
  @Link historyArr: string[] 
 
  build() { 
    // Flex布局，居中显示 
    Flex({ alignItems: ItemAlign.Center }){ 
      // 文本输入框 
      TextInput({ placeholder: '请输入...', text: this.historyInput }) 
        .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.historyInput = value 
        }) 
 
      // 新增网络用语按钮 
      Button({type: ButtonType.Capsule, stateEffect:false}) { 
        Text('新增').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') 
  } 
}

历史记录和随机删除按钮组合

@Component 
struct Clear_History { 
  // 链接主入口历史记录数组 
  @Link historyArr: string[] 
 
  build() { 
    Flex({ alignItems: ItemAlign.Center }) { 
      if (this.historyArr.length > 0) { 
        Text('历史记录') 
          .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 }, () => { 
              var idx = Math.floor(Math.random()*this.historyArr.length); 
              this.historyArr.splice(idx, 1) 
            }) 
          }) 
      } 
    } 
    .height(40) 
    .padding({ left: 20, top: 10 }) 
  } 
}

滚动组件和多个文本组件组合成，给Text组件添加两个transition属性，分别用于定义组件的添加动效和移除动效。

@Component 
struct Flowlayout_Container { 
  // 链接主入口历史记录数组 
  @Link historyArr: 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}) 
    } 
  } 
}