从零开始仿抖音做一个APP(首页顶部T标签添加&页面关联)

从零开始仿抖音做一个APP(首页顶部标签添加&页面关联)

本文主要介绍首页顶部标签相关布局及页面切换。

先看看首页布局:

首先一个顶部标签栏,底部一个Swiper,用于跟随顶部标签的变化而变化,同时支持页面滚动切换。此外对左右两个icon都进行了封装,对于重复使用的标签或者view都可以这样使用,如下图所示:

复制代码
@Builder
  iconTop(src: ResourceStr, clickevent: () => void) {
    Row() {
      Image(src)
        .width(22)
        .height(22)
    }
    .onClick(() => {
      //处理点击事件
    })
    .height(HomeConstant.HOME_TAB_HEIGHT)
    .width(36)
    .justifyContent(FlexAlign.Center)
  }

对于顶部标签的布局,本文使用了ForEach工具,每一个标签再次进行了封装,具体代码如下:

复制代码
 Flex({
          justifyContent: FlexAlign.SpaceBetween,
          space: { main: LengthMetrics.px(30), cross: LengthMetrics.px(30) }
        }) {
          ForEach(HomeConstant.HOME_TAB_ARRAY, (item: string, index: number) => {
            this.textTop(index, item)
          })
        }.layoutWeight(1)

        this.iconTop($r('app.media.home_search'), () => {
        })

text封装:

复制代码
@Builder
  textTop(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? $r('app.color.home_tab_selected_color') :
        $r('app.color.home_tab_normal_color'))
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(20)
        .margin({ top: 10, bottom: 8 })
      Divider()
        .strokeWidth(2)//后续再对此处宽度、动画做进一步处理
        .width(24)
        .color('#fff')
        .opacity(this.currentIndex === index ? 1 : 0)
    }
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .layoutWeight(1)
    .onClick(() => {
      this.currentIndex = index
      this.swiperController.changeIndex(this.currentIndex)
    })
  }

接下来将顶部标签与swiper进行关联,根据标签变化动态更新UI。此处swiper的数据源swiperData需要转为IDataSource类型。

复制代码
Swiper(this.swiperController) {
        LazyForEach(this.swiperData, (item: string, index: number) => {
          if (index === 0) {
            ExperienceView()
          } else if (index === 1) {
            LongVideoView()
          } else if (index === 2) {
            HotView()
          } else if (index === 3) {
            FocusView()
          } else if (index === 4) {
            RecommendView()
          }
        }, (item: string) => item)
      }
      .loop(false)
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
        this.currentIndex = targetIndex
        this.swiperController.changeIndex(targetIndex)
      })

如此便实现了首页各个标签页面的切换的加载,效果如下所示。

接下来就是完成各个子模块的页面绘制。

本项目为工作之余随手编写,有很多可继续完善的地方(比如顶部是否用Tabs组件、部分组件的数据能否进一步封装、UI加载是否可以更流畅等),有待后续优化。

相关推荐
光锥智能3 小时前
靠华为脱胎换骨,但赛力斯仍需要Plan B
华为
搞瓶可乐7 小时前
鸿蒙ArkUI实战之组件;Text组件,Image组件,Button组件,Span组件和TextInput组件的使用场景及使用方法
华为·harmonyos·鸿蒙系统·arkui·组件化开发·基础组件使用
九丘教育7 小时前
【仓颉 + 鸿蒙 + AI Agent】CangjieMagic框架(15):NaiveExecutor
人工智能·华为·harmonyos
搞瓶可乐11 小时前
鸿蒙ArkUI实战之TextArea组件、RichEditor组件、RichText组件、Search组件的使用
华为·harmonyos·arkui·搜索框·富文本组件·富文本输入框·鸿蒙原生api
孤寂码农_defector11 小时前
鸿蒙系统的 “成长烦恼“:生态突围与技术迭代的双重挑战
macos·华为·objective-c·cocoa·harmonyos
别说我什么都不会13 小时前
【仓颉三方库】 数据解析——TOML4CJ
harmonyos
鸿蒙布道师13 小时前
鸿蒙NEXT开发LRUCache缓存工具类(单例模式)(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
城中的雾15 小时前
HarmonyOS Next 编译之如何构建不同包名应用
harmonyos·arkts
别说我什么都不会15 小时前
【仓颉三方库】 数据解析—— jwt4cj
harmonyos
周胡杰16 小时前
鸿蒙-跨设备互通,设备互通提供跨设备的相机、扫描、图库访问能力,平板或2in1设备可以调用手机的相机、扫描、图库等功能。
数码相机·华为·自动化·电脑·harmonyos·鸿蒙·鸿蒙系统