HarmonyOS 鸿蒙Next如何实现图片中这种搜索记录或热门搜索列表样式?

HarmonyOS 鸿蒙Next如何实现图片中这种搜索记录或热门搜索列表样式?

cke_275.jpeg

如何实现图片中 搜索记录或热门搜索列表样式,list item宽度包裹 剩余宽度显示不下一条是自动换行 


更多关于HarmonyOS 鸿蒙Next如何实现图片中这种搜索记录或热门搜索列表样式?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

使用Flex并设置允许换行属性wrap: FlexWrap.Wrap

参考【https://blog.csdn.net/zhongcongxu01/article/details/142582225

更多关于HarmonyOS 鸿蒙Next如何实现图片中这种搜索记录或热门搜索列表样式?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


参考一楼回复,使用 flex 布局,然后将 wrap 设置为 FlexWrap.Wrap 即可实现剩余宽度显示不下,会自动换行展示的效果。

HarmonyOS 鸿蒙Next实现搜索记录或热门搜索列表样式,可以通过以下步骤进行:

首先,使用Flex容器布局来实现热门搜索列表和搜索历史记录,因为Flex容器对于此类布局非常高效且方便。在布局中,可以为每个搜索项创建一个Text组件,并设置相应的样式,如字体大小、颜色、内边距和背景色等。

其次,为了实现搜索记录的功能,可以利用PersistentStorage进行持久化数据存储。当用户进行搜索时,将搜索关键词保存到PersistentStorage中。在展示搜索记录时,从PersistentStorage中读取数据,并动态渲染到页面上。

最后,为了实现热门搜索列表,可以预先定义一组热门搜索关键词,并将其存储在应用的某个位置。在展示热门搜索时,读取这组关键词,并按照一定的样式渲染到页面上。

通过以上步骤,可以实现类似图片中的搜索记录或热门搜索列表样式。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部