鸿蒙开发之导航栏tabs(类似Android tablayout)

        当页面信息较多时,为了让用户能够聚焦于当前显示的内容,需要对页面内容进行分类,提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换,一方面提升查找信息的效率,另一方面精简用户单次获取到的信息量。

基本布局

        Tabs组件的页面组成包含两个部分,分别是TabContent和TabBar。TabContent是内容页,TabBar是导航页签栏,页面结构如下图所示,根据不同的导航类型,布局会有区别,可以分为底部导航、顶部导航、侧边导航,其导航栏分别位于底部、顶部和侧边。

一、头部

  @Builder
  AppStore(){
    Tabs({ barPosition: BarPosition.Start}){
      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("全部")

      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("已安装")

      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("未安装")

      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("更新")
    }
  }

二、底部

  @Builder
  AppStore(){
    Tabs({ barPosition: BarPosition.End}){
      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("全部")

      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("已安装")

      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("未安装")

      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("更新")
    }
  }

三、侧边导航(多用于横屏)

 @Builder
  AppStore(){
    Tabs({ barPosition: BarPosition.Start}){
      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("全部")

      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("安装")

      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("未装")

      TabContent() {
        Column() {

        }
        .width('100%')
        .height('100%')
      }
      .tabBar("更新")
    }.vertical(true)
  }

接下来主要介绍自定义 tabs

自定义Tabs中的TabContent

在tabContent 添加要自定义的布局,如下代码

            TabContent() {
              Column() {
                Text('我的').height('100%')
              }
              .width('100%')
              .height('100%')
              .backgroundColor('#007DFF')
            }
            .tabBar(this.TabBuilder('我的', 3, $r('app.media.ic_tab_setting_sel'), $r('app.media.ic_tab_setting')))
 @Builder
  TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .margin({top:2})
        .fontColor(this.currentIndex === targetIndex ? '#ff7900' : '#6B6B6B')
    }
    .width('100%')
    .margin({top:2,bottom:2})
    .onClick(event => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(targetIndex);
    })
    .justifyContent(FlexAlign.Center)
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/475027.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IDEA中使用git

从远程仓库拉取代码 更新代码 提交代码 推送代码到远程仓库 如果代码只是进行了commit,即只提交到了本地仓库而并未推送要进行推送点击push按钮即可: 分支操作 新建分支 切换分支、删除分支、其余分支操作 git面板介绍 reset操作、rebase操作、rev…

【LeetCode: 224. 基本计算器 + 模拟 + 栈】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

matlab 条件数的倒数

目录 一、概述1、算法概述2、主要函数3、参考文献二、条件设置错误的矩阵的敏感度三、求解单位矩阵的条件四、参考链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、概述 1、算法概述

正则表达式具体用法大全

# 正则表达式: ## 单字符匹配: python # 匹配某个字符串: # text "abc" # ret re.match(b,text) # print(ret.group()) # 点(.):匹配任意的字符(除了\n): # text "\nabc&quo…

前言:为什么C语言最适合编程入门?

前言:为什么C语言最适合编程入门? C语言被认为最适合编程入门的原因主要有以下几点: 基础且强大:C语言是一种基础且强大的编程语言。它提供了对底层硬件的直接访问,让初学者能够更好地理解计算机的工作原理&#xff0…

Unity 学习笔记 5.控制飞机飞行

目录 1.摄像机跟随的方法 2.鼠标按键响应 3.键盘按键响应 4.导入素材 5.让飞机向前飞 6.摄像机跟随飞机移动 7.鼠标控制飞机倾斜 8.键盘控制飞机飞行 下载源码 UnityPackage 1.摄像机跟随的方法 2.鼠标按键响应 3.键盘按键响应 4.导入素材 下载素材 步骤: 将…

python的幼儿园管理系统flask-django-php-nodejs

随着信息时代的来临,过去的传统管理方式缺点逐渐暴露,对过去的传统管理方式的缺点进行分析,采取计算机方式构建幼儿园管理系统。本文通过课题背景、课题目的及意义相关技术,提出了一种活动信息、课程信息、菜谱信息、通知公告、家…

监听键盘按下和弹起事件

<div class"center-container" id"ed-editor-container" tabindex"0"></div> tabindex"0" 让div可获得聚焦 // 编辑器区域键盘事件监听 this.edEditorContainer document.getElementById(ed-editor-container) this.edEd…

【100%成功】从0到1教你开通GPT4.0会员,一年立省1800,拒绝高价代开,免排队无需等待。

我们看下这个网址代开差不多要300&#xff0c;而我用Fomepay每个月才150左右&#xff0c;不需要年费月费&#xff0c;虽然有开卡费用10刀&#xff0c;但是也很划算&#xff0c;你自己算一下&#xff0c;一个月300一年就1千多 点击获取卡&#xff0c;0年费0月费 开卡步骤很简…

卫生间尺寸大揭秘,让你装修不再迷茫。福州中宅装饰,福州装修

卫生间的布局和尺寸因卫生间的大小和设计风格而异。以下是一些常见的布局和尺寸&#xff1a; 1. 洗漱区&#xff1a; 洗手台的宽度一般为600mm&#xff0c;高度为850~900mm。洗手台外边距离障碍物应预留600mm&#xff0c;可容纳人员站立或弯腰时的纵向尺寸。弯腰洗脸横向活动…

Linux/Perfection

Enumeration nmap 用 nmap 扫描了常见的端口&#xff0c;发现对外开放了 22,80&#xff0c;扫描一下详细信息&#xff0c;如下所示 ┌──(kali㉿kali)-[~/vegetable/HTB/Perfection] └─$ nmap -sC -sV -p 22,80 10.10.11.253 -oA nmap Starting Nmap 7.93 ( https://nmap…

Mysql总结(附思维导图)

Mysql Mysql索引 使用 创建主键索引 在对应字段后指定primary_key&#xff1a;id int primary key 创建唯一索引 在对应字段后指定unique_key&#xff1a;name varchar(20) unique 创建普通索引 在创建表的最后&#xff0c;指定某列或某几列&#xff1a;index(name) 创建全…

【JAVA笔记】IDEA配置本地Maven

文章目录 1 配置本地Maven1.1 Maven下载1.2 Maven安装与配置1.2.1 安装1.2.2 配置1.2.2.1 环境配置1.2.2.2 本地仓库配置 2 IDEA设置本地Maven 1 配置本地Maven 1.1 Maven下载 官网&#xff1a;http://maven.apache.org/下载地址&#xff1a;http://maven.apache.org/downloa…

腾讯云优惠券、代金券、折扣券领取方法及使用教程

腾讯云作为国内领先的云计算服务提供商&#xff0c;一直致力于为广大用户提供高效、稳定、安全的云服务。为了吸引用户上云&#xff0c;腾讯云经常推出各种优惠活动&#xff0c;其中就包括腾讯云优惠券。下面小编将详细介绍腾讯云优惠券的相关信息&#xff0c;包括种类、领取入…

Coze知识库新上线!是否真的好用?

近期&#xff0c;Coze知识库工具新上线并迅速引起了行业内的关注。作为一款公认的知识管理和团队协作工具&#xff0c;Coze被赞誉为"团队协作的游戏规则修改者"。那么&#xff0c;Coze是否真的如传闻中那么好用呢&#xff1f; 首先&#xff0c;从优势来看&#xff0c…

考研数学|《660》题这样刷,效率最高!

首先要了解一下660的难度&#xff0c;我认为660的难度是在基础和强化之间的一本习题册。具有一些比较好的选填题目&#xff0c;有些题目可能对初学者来说较为困难&#xff0c;尤其是一些包含二级结论的一些题目。但是对于强化阶段来说&#xff0c;这本题目可能难度较低了一些。…

【鸿蒙HarmonyOS开发笔记】应用数据持久化之通过用户首选项实现数据持久化

概述 应用数据持久化&#xff0c;是指应用将内存中的数据通过文件或数据库的形式保存到设备上。内存中的数据形态通常是任意的数据结构或数据对象&#xff0c;存储介质上的数据形态可能是文本、数据库、二进制文件等。 HarmonyOS标准系统支持典型的存储数据形态&#xff0c;包…

mybatis-plus和mybatis同时引入时,出现的问题

这里同时引入了一个mybatis-plus和mybatis&#xff0c;导致了配置文件里面配置的映射文件一直没生效&#xff0c;一直报错找不到隐私文件 mapper-locations 同时引入是这个是不会生效的 只有用mybatis.mapper-locations配置时才会生效

鸿蒙Harmony应用开发—ArkTS-粒子动画

粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。动画元素是一个个粒子&#xff0c;这些粒子可以是圆点、图片。通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画&#xff0c;来营造一种氛围感&#xff0c;比如下雪的动效&#xff0c;…

基于java+springboot+vue实现的智慧养老院管理系统(文末源码+Lw+ppt)23-490

摘 要 智慧养老院管理系统采用B/S架构&#xff0c;数据库是MySQL。网站的搭建与开发采用了先进的java进行编写&#xff0c;使用了springboot框架。该系统从三个对象&#xff1a;由管理员和家属、护工来对系统进行设计构建。主要功能包括&#xff1a;个人信息修改&#xff0c;…