【HarmonyOS NEXT】鸿蒙开发：搜刮栏历史记载以及删除记载 ...

实现效果

准备数据

1. // 状态变量，存储音乐名称的数组
2.   @State music: string[] =
3.     ['句号', '泡沫', '星星', '奢香夫人', '虹之间', '奢香夫人', '倒数', '最佳损友', '富士山下', 'Sweet Dreams']
4.   // 状态变量，用于控制管理模式的开关
5.   @State isManage: boolean = false

复制代码

 搜刮框

 一个搜刮框，用户可以输入关键字举行搜刮。

1. // 搜索框
2.       Search({ placeholder: '请输入关键字...' })  // 搜索框配置，设置占位提示文本
3.       .searchButton('搜索')  // 设置搜索按钮的文本
4.       .width(300)  // 设置搜索框宽度
5.       .height(40)  // 设置搜索框高度
6.       .backgroundColor('#F5F5F5')  // 设置搜索框背景颜色
7.       .onSubmit((value: string) => {  // 定义搜索提交时的回调函数
8.           this.music.unshift(value)  // 将搜索值添加到音乐数组的开头
9.         })

复制代码

搜刮历史记载的展示

一行文本，分别表现"搜刮历史"和一个根据 isManage 状态切换表现"管理"或"关闭管理"的文本，点击该文本可以切换 isManage 的状态。
通过Flex布局和循环，为每个音乐名称创建一个 Chip 元素。Chip 元素具有特定的标签文本样式、尺寸、是否答应关闭等属性，并且这些属性会根据 isManage 的状态举行相应的调整。
 

1.       Row() {  // 行布局
2.         Text('搜索历史')  // 显示"搜索历史"文本
3.         Text(this.isManage? '关闭管理' : '管理')  // 根据管理状态显示相应文本
4.          .onClick(() => {  // 点击文本时的回调函数
5.             this.isManage =!this.isManage  // 切换管理状态
6.           })
7.       }
8.      .width('90%')  // 设置行宽度为 90%
9.      .justifyContent(FlexAlign.SpaceBetween)  // 设置行内元素两端对齐
11.       Flex({ wrap: FlexWrap.Wrap }) {  // 弹性布局，允许换行
12.         ForEach(this.music, (item: string) => {  // 遍历音乐数组
13.           Row() {  // 行布局
14.             Chip({  // 芯片组件配置
15.               label: {  // 标签配置
16.                 text: item,  // 标签文本
17.                 fontSize: 12,  // 字体大小
18.                 fontColor: Color.Blue,  // 字体颜色
19.                 fontFamily: "HarmonyOS Sans",  // 字体家族
20.                 labelMargin: { left: 10, right: 10 }  // 标签边距
21.               },
22.               size: ChipSize.SMALL,  // 芯片尺寸为小
23.               allowClose: this.isManage,  // 是否允许关闭，取决于管理状态
24.               enabled: true,  // 启用状态
25.               backgroundColor: $r('sys.color.ohos_id_color_button_normal'),  // 背景颜色
26.               borderRadius: $r('sys.float.ohos_id_corner_radius_button'),  // 边框圆角
27.               onClose: () => {  // 关闭芯片时的回调函数
28.                 console.log("chip on close")
29.               },
30.               onClicked: () => {  // 点击芯片时的回调函数
31.                 console.log("chip on clicked")
32.                 //TODO 搜索label的内容
33.               }
34.             })
35.           }.padding(5)  // 设置内边距为 5
36.         })
37.       }
38.      .padding({ left: 5, right: 5 })  // 整体设置左右内边距为 5

复制代码

完整代码

1. import { Chip, ChipSize } from '@kit.ArkUI';
3. /**
4. * Index 组件结构体
5. */
6. @Entry
7. @Component
8. struct Index {
9.   /**
10.    * 状态变量，存储音乐名称的数组
11.    */
12.   @State music: string[] =
13.     ['句号', '泡沫', '星星', '奢香夫人', '虹之间', '奢香夫人', '倒数', '最佳损友', '富士山下', 'Sweet Dreams']
14.   /**
15.    * 状态变量，用于控制管理模式的开关
16.    */
17.   @State isManage: boolean = false
19.   /**
20.    * 构建组件的方法
21.    */
22.   build() {
23.     Column({ space: 10 }) { // 列布局，设置间距为 10
24.       // 搜索框
25.       Search({ placeholder: '请输入关键字...' })// 搜索框配置，设置占位提示文本
26.         .searchButton('搜索')// 设置搜索按钮的文本
27.         .width(300)// 设置搜索框宽度
28.         .height(40)// 设置搜索框高度
29.         .backgroundColor('#F5F5F5')// 设置搜索框背景颜色
30.         .onSubmit((value: string) => { // 定义搜索提交时的回调函数
31.           this.music.unshift(value) // 将搜索值添加到音乐数组的开头
32.         })
34.       Row() { // 行布局
35.         Text('搜索历史') // 显示"搜索历史"文本
36.         Text(this.isManage ? '关闭管理' : '管理')// 根据管理状态显示相应文本
37.           .onClick(() => { // 点击文本时的回调函数
38.             this.isManage = !this.isManage // 切换管理状态
39.           })
40.       }
41.       .width('90%') // 设置行宽度为 90%
42.       .justifyContent(FlexAlign.SpaceBetween) // 设置行内元素两端对齐
44.       Flex({ wrap: FlexWrap.Wrap }) { // 弹性布局，允许换行
45.         ForEach(this.music, (item: string) => { // 遍历音乐数组
46.           Row() { // 行布局
47.             Chip({
48.               // 芯片组件配置
49.               label: {
50.                 // 标签配置
51.                 text: item, // 标签文本
52.                 fontSize: 12, // 字体大小
53.                 fontColor: Color.Blue, // 字体颜色
54.                 fontFamily: "HarmonyOS Sans", // 字体家族
55.                 labelMargin: { left: 10, right: 10 }  // 标签边距
56.               },
57.               size: ChipSize.SMALL, // 芯片尺寸为小
58.               allowClose: this.isManage, // 是否允许关闭，取决于管理状态
59.               enabled: true, // 启用状态
60.               backgroundColor: $r('sys.color.ohos_id_color_button_normal'), // 背景颜色
61.               borderRadius: $r('sys.float.ohos_id_corner_radius_button'), // 边框圆角
62.               onClose: () => { // 关闭芯片时的回调函数
63.                 console.log("chip on close")
64.               },
65.               onClicked: () => { // 点击芯片时的回调函数
66.                 console.log("chip on clicked")
67.                 //TODO 搜索label的内容
68.               }
69.             })
70.           }.padding(5) // 设置内边距为 5
71.         })
72.       }
73.       .padding({ left: 5, right: 5 }) // 整体设置左右内边距为 5
74.     }
75.     .width('100%') // 列布局宽度为 100%
76.   }
77. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。