1. 涉及到的技术点
- axios的使用(在第四集中,教了如何使用axios获取影片数据)
- @Extend装饰器的使用
2. 官方文档指南
- @Extend装饰器的使用:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-extend-V5
3.为什么要使用@Extend装饰器?
- 官方说明:如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器@Styles,@Extend
- 在第六集中,细心的同学会发现在设置tabBar样式的时候,每个分类的样式重复了好多相同的代码,所以官方也考虑到了这个问题,建议使用装饰器来解决这个问题,看看下图没有利用装饰器写的代码
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/5c74811a6eff45abbcda092b9627907e.png)
3. demo具体实现
- 讲了这么多,看看使用了装饰器之后的代码简洁度吧
import axios, { AxiosError, AxiosResponse } from '@ohos/axios';
import { MovieInfo, MovieInfoItem } from '../entity/MovieInfo';
import { router } from '@kit.ArkUI';
@Extend(TabContent)
function funcCategoryTextStyle(titleName: string) {
.tabBar(SubTabBarStyle.of(titleName).indicator({
color: '#e22418',
borderRadius: 4,
height: 3,
})
.labelStyle({
selectedColor: '#e22418',
unselectedColor: '#ff999999'
})
)
}
@Entry
@Component
struct CategoryPage {
@State currentIndex: number = 0
@State movieInfo: MovieInfo = {
subjects: []
}
titles: string[] = ['最新', '华语', '欧美', '韩国', '日本', '中国香港', '中国台湾', '印度', '泰国', '其他']
onPageShow(): void {
this.getMovieListData(this.titles[0])
}
getMovieListData(categoryName:string) {
axios<string, AxiosResponse<string>, null>({
method: "get",
params:{
'tag':categoryName
},
url: 'https://movie.douban.com/j/search_subjects?type=movie&page_limit=50&page_start=0'
}).then((res: AxiosResponse) => {
this.movieInfo = res.data
}).catch((error: AxiosError) => {
console.error(error.message);
})
}
build() {
Column() {
Row() {
Image($r('app.media.img_back')).width(26).onClick(()=>{router.back()})
Text('分类')
.fontSize(21)
.fontWeight(600)
}
.width('100%')
Tabs() {
ForEach(this.titles, (title: string) => {
TabContent() {
Grid() {
ForEach(this.movieInfo.subjects, (item: MovieInfoItem) => {
GridItem() {
Column() {
Image(item.cover)
.height(140)
.width('100%')
.objectFit(ImageFit.Cover)
Text(item.title)
.fontSize(13)
.margin({ top: 6 })
.textOverflow({
overflow: TextOverflow.Clip
})
.maxLines(1)
}.width('100%')
}.onClick(() => {
})
})
}
.columnsTemplate('1fr 1fr 1fr')
.margin({ top: 20 })
.columnsGap(10)
.rowsGap(10)
.margin(10)
}
.funcCategoryTextStyle(title)
})
}
.barMode(BarMode.Scrollable)
.animationMode(AnimationMode.NO_ANIMATION)
.onChange((index: number) => {
this.movieInfo.subjects =[]
this.getMovieListData(this.titles[index])
})
}
.height('100%')
.width('100%')
}
}
4. 运行效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/c5aec805aef945a98dd0e85543f5f197.png)