布局推荐页面

布局搜索区域

推荐页面有个搜索区域。

搜索框的实现需要用到输入框，因此要用到新知识：

搜索框的代码实现：

布局轮播图区域

轮播图需要用到新组件——Swiper。

默认不能自动切换下一张，需要添加.autoPlay(true)来切换。

首先准备好轮播图的数据，就是一个数组里放了网络图。

模拟器无法看到网络图片，是因为没有开通网络权限。开通方法在官网：声明权限-申请应用权限-应用权限管控-程序访问控制-安全-系统 - 华为HarmonyOS开发者。

简单来说在module.json5中加上：

轮播图的实现：

布局每日推荐区域

每日推荐有个标题，这个在之前已经写好了@Builder，直接拿来复用即可。

同时还需要有个List组件，需要实现左右滑动，通过.listDirection(Axis.Horizontal)设置即可。

准备好每日推荐数据：

注意：在放置文字后，我们发现顶部圆角效果失效了：

因此可以给Column加上.clip(true)来使得组件根据Column的radius值来进行裁剪。如图：

Text()组件超过两行显示省略号怎么实现？如图：

第一个规定文本显示的最大行数，第二个规定了文本溢出的显示方式。Ellipsis是省略号。

布局推荐歌单区域

同前面的每日推荐类似，整体用标题Builder和List组件来实现。

注意，由于List()默认会占据一个很大的高度，因此前面的List()会把推荐歌单的内容挤下去。因此，要对List用height来进行高度限制。

另外，在图片上显示了播放量，因此还要用到层叠组件。