08-自然壁紙實戰教程-視頻列表

前言

視頻列表頁面本質上也是一個數據展示的列表，不同之處在于之前是是展示壁紙，Image組件負責渲染，這里展示的是視頻，使用Video組件，另外視頻頁面也實現了下載的基本功能，由于視頻往往比圖片要大，所以這里的下載是比較耗時的，因此使用了多線程技術taskpool實現了視頻的下載，并且保存到相冊。

視頻搜索

這個模塊其實是老模塊了，這里直接提供代碼

  // 頂部搜索欄Row() {TextInput({ placeholder: '搜索視頻...', text: $$this.videoViewModel.searchText }).width('80%').height(40).backgroundColor('#F5F5F5').borderRadius(20).padding({ left: 15, right: 15 }).onChange((text) => {this.videoViewModel.params.q = text}).onSubmit(async () => {await this.videoViewModel.search()})Button('搜索').width('18%').height(40).margin({ left: 8 }).borderRadius(20).backgroundColor('#3366CC').onClick(async () => {await this.videoViewModel.search()})}.width('100%').padding(10).margin({ top: 6 })

視頻分類

視頻分類頁面也是一個常規的分類滾動結構，可以出用Scroll組件完成基本結構

  Row() {Text('類型:').fontSize(16).fontWeight(FontWeight.Medium).margin({ right: 10 })// 使用Scroll實現橫向滾動Scroll() {Row() {// 使用categories數據源ForEach(LocalData.CategoryData, (item: ICategory) => {Button({ type: ButtonType.Capsule }) {Text(item.text).fontSize(16).fontColor(this.videoViewModel.selectedCategory === item.value ? '#FFFFFF' : '#333333').padding({ left: 5, right: 5 })}.backgroundColor(this.videoViewModel.selectedCategory === item.value ? '#3366CC' : '#F0F0F0').margin({ right: 12 }).height(40).width('auto').padding({ left: 15, right: 15 }).onClick(() => {this.videoViewModel.selectCategory(item.value)})})}.width('auto')}.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width('80%').layoutWeight(1)}.width('100%').padding({ left: 10, right: 10, bottom: 10 }).alignItems(VerticalAlign.Center)

LocalData.CategoryData 數據源

  static readonly CategoryData: ICategory[] = [{"id": 0,"text": "背景","value": "backgrounds","icon": "🌅"},{"id": 1,"text": "時尚","value": "fashion","icon": "👔"},{"id": 2,"text": "自然","value": "nature","icon": "🌲"},{"id": 3,"text": "科學","value": "science","icon": "🔬"},{"id": 4,"text": "教育","value": "education","icon": "📚"},{"id": 5,"text": "感情","value": "feelings","icon": "??"},{"id": 6,"text": "健康","value": "health","icon": "🏥"},{"id": 7,"text": "人","value": "people","icon": "👥"},{"id": 8,"text": "宗教","value": "religion","icon": "🙏"},{"id": 9,"text": "地方","value": "places","icon": "🌆"},{"id": 10,"text": "動物","value": "animals","icon": "🐱"},{"id": 11,"text": "工業","value": "industry","icon": "🏭"},{"id": 12,"text": "計算機","value": "computer","icon": "💻"},{"id": 13,"text": "食品","value": "food","icon": "🍜"},{"id": 14,"text": "體育","value": "sports","icon": "🏃"},{"id": 15,"text": "交通","value": "transportation","icon": "🚗"},{"id": 16,"text": "旅行","value": "travel","icon": "??"},{"id": 17,"text": "建筑物","value": "buildings","icon": "🏢"},{"id": 18,"text": "商業","value": "business","icon": "💼"},{"id": 19,"text": "音樂","value": "music","icon": "🎵"}]

視頻列表

這里是視頻列表，我們發送請求獲取到視頻數據后，使用 LazyForEach 結合 List 實現的視頻列表渲染

      // 視頻列表if (this.videoViewModel.videoList.totalCount() > 0) {List() {LazyForEach(this.videoViewModel.videoList, (video: VideoData, index: number) => {ListItem() {Column() {// 視頻縮略圖Stack() {Image(video.videos?.medium?.thumbnail || '').width('100%').height(200).borderRadius(8).objectFit(ImageFit.Cover)// 播放時長if (video.duration) {Text(CommonUtils.formatDuration(video.duration)).fontSize(12).fontColor($r('sys.color.comp_background_list_card')).backgroundColor('rgba(0, 0, 0, 0.6)').borderRadius(4).padding({left: 6,right: 6,top: 2,bottom: 2})}}.width('100%').alignContent(Alignment.BottomEnd)// 視頻信息Row() {Column() {Text(video.tags.split(',')[0] || '未知標題').fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 8, bottom: 4 }).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })Row() {Text(`${video.views || 0} 次觀看`).fontSize(12).fontColor('#666666')Text(`${video.likes || 0} 贊`).fontSize(12).fontColor('#666666').margin({ left: 10 })}}.alignItems(HorizontalAlign.Start).layoutWeight(1)}.width('100%').padding({left: 4,right: 4,top: 4,bottom: 8})}.width('100%').borderRadius(8).backgroundColor($r('sys.color.comp_background_list_card')).margin({ bottom: 12 })}.onAppear(() => {if (index == (this.videoViewModel.videoList.totalCount() - 5)) {this.videoViewModel.loadMore()}}).onClick(() => {NavigationUtils.getInstance().navigatePush(NavigationConst.Video_Player_View, video)})}, (video: VideoData, index: number) => video.id.toString())}.width('100%').layoutWeight(1).padding({ left: 10, right: 10 }).cachedCount(10)}

視頻詳情

視頻詳情是通過點擊視頻卡片，然后通過Navigation跳轉實現的

 NavigationUtils.getInstance().navigatePush(NavigationConst.Video_Player_View, video)

關于我們

關于青藍逐碼組織