从零开始仿抖音做一个APP（主页面tabs组件）

最新推荐文章于 2024-11-28 09:34:39 发布

MardaWang

最新推荐文章于 2024-11-28 09:34:39 发布

阅读量730

点赞数 11

分类专栏： HarmonyOS NEXT 文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/wy363681759/article/details/143493192

版权

前一章节，我们完成了欢迎页的逻辑和UI，沉浸式效果也做了讲解和实现，本文简单介绍一下主页面Tabs组件的应用。

从零开始仿抖音做一个APP（主页面tabs组件）

Tabs组件介绍
Tabs组件实现

Tabs组件介绍

Tabs组件是当前所有应用中最常用的容器组件之一，用户可以在一个页面内快速实现视图内容的切换，极大地提高效率。

Tabs组件主要包含两个部分：TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。
在这里插入图片描述
Tabs组件的写法通常如下所示：

Tabs() {
  TabContent() {
    Text('首页的内容').fontSize(30)
  }
  .tabBar('首页')

  TabContent() {
    Text('推荐的内容').fontSize(30)
  }
  .tabBar('推荐')
  
  TabContent() {
    Text('我的内容').fontSize(30)
  }
  .tabBar("我的")
}

导航栏位置使用Tabs的barPosition参数进行设置。默认情况下，导航栏位于顶部，此时，barPosition为BarPosition.Start。设置为底部导航时，需要将barPosition设置为BarPosition.End。