基于HarmonyOS ArkUI 3.0框架,我成功开发了流式布局网络语

开发 OpenHarmony
简单介绍一下本文的实现效果,在文本输入框输入流行网络用语,点击新增按钮,把流行网络用语添加到下面流式布局的组件里。

[[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技术社区
基于HarmonyOS ArkUI 3.0 框架,我成功开发了流式布局网络语-鸿蒙HarmonyOS技术社区

三、创建工程

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

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

四、界面开发

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

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

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

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

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

  1. @Component 
  2. struct Search_Input { 
  3.   // 存储文本输入框内容 
  4.   @State historyInput: string = '' 
  5.   // 链接主入口历史记录数组 
  6.   @Link historyArr: string[] 
  7.  
  8.   build() { 
  9.     // Flex布局,居中显示 
  10.     Flex({ alignItems: ItemAlign.Center }){ 
  11.       // 文本输入框 
  12.       TextInput({ placeholder: '请输入...', text: this.historyInput }) 
  13.         .type(InputType.Normal) 
  14.         .placeholderColor(Color.Gray) 
  15.         .placeholderFont({ size: 50, weight: 2}) 
  16.         .enterKeyType(EnterKeyType.Search) 
  17.         .caretColor(Color.Green) 
  18.         .layoutWeight(8) 
  19.         .height(40) 
  20.         .borderRadius('20px'
  21.         .backgroundColor(Color.White) 
  22.         .onChange((value: string) => { 
  23.           this.historyInput = value 
  24.         }) 
  25.  
  26.       // 新增网络用语按钮 
  27.       Button({type: ButtonType.Capsule, stateEffect:false}) { 
  28.         Text('新增').fontSize(17).fontColor(Color.Blue) 
  29.       } 
  30.       .layoutWeight(2) 
  31.       .backgroundColor('#00000000'
  32.       .onClick((event: ClickEvent) => { 
  33.         if (this.historyInput != null && this.historyInput.length > 0) { 
  34.           // 添加animateTo方法,来使Text组件子组件动效生效 
  35.           animateTo({ duration: 600 }, () => { 
  36.             this.historyArr.unshift(this.historyInput) 
  37.           }) 
  38.         } 
  39.         this.historyInput = '' 
  40.       }) 
  41.     } 
  42.     .height(60) 
  43.     .padding({left: 10}) 
  44.     .backgroundColor('#FFedf2f5'
  45.   } 

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

  1. @Component 
  2. struct Clear_History { 
  3.   // 链接主入口历史记录数组 
  4.   @Link historyArr: string[] 
  5.  
  6.   build() { 
  7.     Flex({ alignItems: ItemAlign.Center }) { 
  8.       if (this.historyArr.length > 0) { 
  9.         Text('历史记录'
  10.           .fontSize(14) 
  11.           .fontColor(Color.Grey) 
  12.           .layoutWeight(5) 
  13.  
  14.         Text('随机删除'
  15.           .textAlign(TextAlign.End
  16.           .margin({right: 30}) 
  17.           .fontSize(14) 
  18.           .fontColor(Color.Red) 
  19.           .layoutWeight(5) 
  20.           .onClick((event: ClickEvent) => { 
  21.             // 添加animateTo方法,来使Text组件子组件动效生效 
  22.             // 随机从历史记录删除一个 
  23.             animateTo({ duration: 600 }, () => { 
  24.               var idx = Math.floor(Math.random()*this.historyArr.length); 
  25.               this.historyArr.splice(idx, 1) 
  26.             }) 
  27.           }) 
  28.       } 
  29.     } 
  30.     .height(40) 
  31.     .padding({ left: 20, top: 10 }) 
  32.   } 

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

  1. @Component 
  2. struct Flowlayout_Container { 
  3.   // 链接主入口历史记录数组 
  4.   @Link historyArr: string[] 
  5.  
  6.   build() { 
  7.     // 滚动组件 
  8.     Scroll() { 
  9.       // Flex布局, wrap为FlexWrap.Wrap为流式布局 
  10.       Flex({justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap}) { 
  11.         if (this.historyArr.length > 0) { 
  12.           // 循环显示出网络用语到文本组件 
  13.           ForEach(this.historyArr, 
  14.             (item:string) => { 
  15.               Text(`${item}`) 
  16.                 .fontSize(18) 
  17.                 .borderStyle(BorderStyle.Solid) 
  18.                 .borderWidth('1px'
  19.                 .borderColor('#dddddd'
  20.                 .borderRadius('90px'
  21.                 .padding({top: 4, bottom: 4, right: 10, left: 10}) 
  22.                 .margin({top: 10, right: 10}) 
  23.                 .textOverflow({overflow: TextOverflow.Ellipsis}) 
  24.                 .maxLines(2) 
  25.                 // 新增网络用语时的动画 
  26.                 .transition({ type: TransitionType.Insert, scale: { x: 0.5, y: 0.5 }, opacity: 0 }) 
  27.                 // 随机删除网络用语的动画 
  28.                 .transition({ type: TransitionType.Delete, rotate: { x: 0, y: 1, z: 0, angle: 360 }, scale: { x: 0, y: 0 } }) 
  29.             }, 
  30.             (item:string) => item.toString() 
  31.           ) 
  32.         } 
  33.       } 
  34.       .margin({left: 20, right: 10, bottom: 100}) 
  35.       .padding({bottom: 10}) 
  36.     } 
  37.   } 

介绍就到此了,声明式开发,是不是简洁了很多,大家一起撸起来吧。

想了解更多内容,请访问:

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

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-12-01 15:40:23

鸿蒙HarmonyOS应用

2021-12-01 15:38:33

鸿蒙HarmonyOS应用

2021-11-02 14:52:17

鸿蒙HarmonyOS应用

2021-10-28 14:58:15

鸿蒙HarmonyOS应用

2022-06-27 14:12:32

css鸿蒙自定义

2021-12-03 09:49:59

鸿蒙HarmonyOS应用

2022-03-17 15:28:18

五子棋HarmonyOSJSAPI

2022-10-24 14:49:54

ArkUI心电图组件

2022-11-02 16:06:54

ArkUIETS

2023-02-13 00:18:22

前端库框架集合

2021-04-20 09:42:20

鸿蒙HarmonyOS应用开发

2022-09-14 15:17:26

ArkUI鸿蒙

2022-10-17 14:36:09

ArkUI虚拟摇杆组件

2022-08-05 19:27:22

通用API鸿蒙

2022-11-10 09:28:40

框架开发

2015-06-24 10:17:24

UI流式布局

2022-07-13 16:24:12

ArkUI(JS)打地鼠游戏

2022-09-21 14:51:21

ArkUI信件弹出

2024-01-11 15:54:55

eTS语言TypeScript应用开发

2022-11-21 16:15:41

ArkUI鸿蒙
点赞
收藏

51CTO技术栈公众号