游戏中心首页
任务
需求
构建游戏中心首页，包括游戏广告轮播图、常用功能、热门游戏、即将公测、为您推荐各部分。
界面原型
轮播及常用功能及热门游戏：
即将公测：
为您推荐：
涉及知识点
- Scroll：滚动容器
- Swiper：滑块视图容器（轮播组件）
- ForEach：循环渲染
- LazyForEach：懒加载
- Grid：网格布局
- List：列表组件
- Rating：评分的组件
- WaterFlow：瀑布流容器
- 数据源监听
1 新建首页组件
在ets下新建文件夹，命名为components，在该文件夹下新建arkts文件，命名为：GameCenterHome，并编写如下骨架代码：
@Component
export default struct GameCenterHome{build() {Scroll(){Column(){Text('首页')}}}
}
Note
Scroll：滚动容器，仅能包含一个根节点
自定义组件：
使用@Component，并且包含build函数
在MainPage中调用：
@Entry
@Component
struct MainPage {@State pageIndex: number = 0;//页面索引build() {Tabs({barPosition:BarPosition.End}){TabContent(){//Text('首页')GameCenterHome()}//.tabBar('首页').tabBar(this.MyTabBuilder(TabID.HOME))...
预览效果：
2 轮播图
页面原型：
- 图片硬编码效果
build() {Scroll(){Column(){Text('首页').fontWeight(FontWeight.Bold).fontSize(22).width('95%').margin(20)//轮播图Swiper(){Image($r('app.media.game1')).gameImageStyle()Image($r('app.media.game2')).gameImageStyle()Image($r('app.media.game3')).gameImageStyle()Image($r('app.media.game4')).gameImageStyle()Image($r('app.media.game5')).gameImageStyle()}.autoPlay(true).margin(10)}}.width('100%').height('100%').backgroundColor('#f1f3f5')}
}
图片样式：
@Extend(Image)
function gameImageStyle(){.width('90%').height(200).borderRadius(12)}
Note
Swiper：滑块视图容器
api参考：
https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-swiper
预览效果：
- 准备模型层数据
在model目录下新建arkts文件，命名为：GameHomeViewModel：
export class GameHomeViewModel{getGameAdvImages(): Array<Resource> {let gameAdvImages: Resource[] = [$r('app.media.game1'),$r('app.media.game2'),$r('app.media.game3'),$r('app.media.game4'),$r('app.media.game5'),];return gameAdvImages;}
}export default new GameHomeViewModel()
- 将轮播图数据源改成从模拟viewmodel中获取并foreach展示：
ForEach(GameHomeViewModel.getGameAdvImages(),(item:Resource)=>{Image(item).gameImageStyle()},(item:Resource)=>JSON.stringify(item))
Note:
ForEach：接口基于数组类型数据来进行循环渲染
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-rendering-control-foreach
预览效果：
3 常用功能
页面原型：
- 将常用功能封装成接口
在model下创建arkts文件