【HarmonyOS NEXT】鸿蒙开发：搜刮栏历史记载以及删除记载
实现效果https://i-blog.csdnimg.cn/direct/063f827b53304ba297a54cac8790398a.pnghttps://i-blog.csdnimg.cn/direct/24acd7c0ece3474b977df6089146031f.gif
准备数据
// 状态变量，存储音乐名称的数组
@State music: string[] =
['句号', '泡沫', '星星', '奢香夫人', '虹之间', '奢香夫人', '倒数', '最佳损友', '富士山下', 'Sweet Dreams']
// 状态变量，用于控制管理模式的开关
@State isManage: boolean = false 搜刮框
一个搜刮框，用户可以输入关键字举行搜刮。
// 搜索框
Search({ placeholder: '请输入关键字...' })// 搜索框配置，设置占位提示文本
.searchButton('搜索')// 设置搜索按钮的文本
.width(300)// 设置搜索框宽度
.height(40)// 设置搜索框高度
.backgroundColor('#F5F5F5')// 设置搜索框背景颜色
.onSubmit((value: string) => {// 定义搜索提交时的回调函数
this.music.unshift(value)// 将搜索值添加到音乐数组的开头
})
搜刮历史记载的展示
一行文本，分别表现"搜刮历史"和一个根据 isManage 状态切换表现"管理"或"关闭管理"的文本，点击该文本可以切换 isManage 的状态。
通过Flex布局和循环，为每个音乐名称创建一个 Chip 元素。Chip 元素具有特定的标签文本样式、尺寸、是否答应关闭等属性，并且这些属性会根据 isManage 的状态举行相应的调整。
Row() {// 行布局
Text('搜索历史')// 显示"搜索历史"文本
Text(this.isManage? '关闭管理' : '管理')// 根据管理状态显示相应文本
.onClick(() => {// 点击文本时的回调函数
this.isManage =!this.isManage// 切换管理状态
})
}
.width('90%')// 设置行宽度为 90%
.justifyContent(FlexAlign.SpaceBetween)// 设置行内元素两端对齐
Flex({ wrap: FlexWrap.Wrap }) {// 弹性布局，允许换行
ForEach(this.music, (item: string) => {// 遍历音乐数组
Row() {// 行布局
Chip({// 芯片组件配置
label: {// 标签配置
text: item,// 标签文本
fontSize: 12,// 字体大小
fontColor: Color.Blue,// 字体颜色
fontFamily: "HarmonyOS Sans",// 字体家族
labelMargin: { left: 10, right: 10 }// 标签边距
},
size: ChipSize.SMALL,// 芯片尺寸为小
allowClose: this.isManage,// 是否允许关闭，取决于管理状态
enabled: true,// 启用状态
backgroundColor: $r('sys.color.ohos_id_color_button_normal'),// 背景颜色
borderRadius: $r('sys.float.ohos_id_corner_radius_button'),// 边框圆角
onClose: () => {// 关闭芯片时的回调函数
console.log("chip on close")
},
onClicked: () => {// 点击芯片时的回调函数
console.log("chip on clicked")
//TODO 搜索label的内容
}
})
}.padding(5)// 设置内边距为 5
})
}
.padding({ left: 5, right: 5 })// 整体设置左右内边距为 5
完整代码
import { Chip, ChipSize } from '@kit.ArkUI';
/**
* Index 组件结构体
*/
@Entry
@Component
struct Index {
/**
* 状态变量，存储音乐名称的数组
*/
@State music: string[] =
['句号', '泡沫', '星星', '奢香夫人', '虹之间', '奢香夫人', '倒数', '最佳损友', '富士山下', 'Sweet Dreams']
/**
* 状态变量，用于控制管理模式的开关
*/
@State isManage: boolean = false
/**
* 构建组件的方法
*/
build() {
Column({ space: 10 }) { // 列布局，设置间距为 10
// 搜索框
Search({ placeholder: '请输入关键字...' })// 搜索框配置，设置占位提示文本
.searchButton('搜索')// 设置搜索按钮的文本
.width(300)// 设置搜索框宽度
.height(40)// 设置搜索框高度
.backgroundColor('#F5F5F5')// 设置搜索框背景颜色
.onSubmit((value: string) => { // 定义搜索提交时的回调函数
this.music.unshift(value) // 将搜索值添加到音乐数组的开头
})
Row() { // 行布局
Text('搜索历史') // 显示"搜索历史"文本
Text(this.isManage ? '关闭管理' : '管理')// 根据管理状态显示相应文本
.onClick(() => { // 点击文本时的回调函数
this.isManage = !this.isManage // 切换管理状态
})
}
.width('90%') // 设置行宽度为 90%
.justifyContent(FlexAlign.SpaceBetween) // 设置行内元素两端对齐
Flex({ wrap: FlexWrap.Wrap }) { // 弹性布局，允许换行
ForEach(this.music, (item: string) => { // 遍历音乐数组
Row() { // 行布局
Chip({
// 芯片组件配置
label: {
// 标签配置
text: item, // 标签文本
fontSize: 12, // 字体大小
fontColor: Color.Blue, // 字体颜色
fontFamily: "HarmonyOS Sans", // 字体家族
labelMargin: { left: 10, right: 10 }// 标签边距
},
size: ChipSize.SMALL, // 芯片尺寸为小
allowClose: this.isManage, // 是否允许关闭，取决于管理状态
enabled: true, // 启用状态
backgroundColor: $r('sys.color.ohos_id_color_button_normal'), // 背景颜色
borderRadius: $r('sys.float.ohos_id_corner_radius_button'), // 边框圆角
onClose: () => { // 关闭芯片时的回调函数
console.log("chip on close")
},
onClicked: () => { // 点击芯片时的回调函数
console.log("chip on clicked")
//TODO 搜索label的内容
}
})
}.padding(5) // 设置内边距为 5
})
}
.padding({ left: 5, right: 5 }) // 整体设置左右内边距为 5
}
.width('100%') // 列布局宽度为 100%
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]