首页 > 其他分享 >【HarmonyOS开发】Tabs使用封装

【HarmonyOS开发】Tabs使用封装

时间:2024-07-16 16:26:34浏览次数:17  
标签:index 封装 Tabs media app TabbarItem HarmonyOS Page icon

背景

在写Tabs时,会使用很多个TabContent来实现不同页面的展示内容,但是如果TabContent数量很多时,会导致Tabs代码量大而且很臃肿,因此想着尝试去封装Tabs的使用,可以让界面整洁和对内容界面的解耦。

主要依托于wrapBuilder:封装全局@Builder的方法使用。需要注意从API 11 才开始支持使用。

代码结构

在这里插入图片描述

Index.ets

import { TabbarItem, TabbarItemList } from '../Models/TabbarItem';

@Entry
@Component
struct Index {
  // tab选择索引
  @State selectIndex: number = 0;
  // 内容
  controller: TabsController = new TabsController()
  // tab集合
  @State items: TabbarItem[] = TabbarItemList;

  build() {
    Tabs({ controller: this.controller, index: this.selectIndex }) {
      ForEach(this.items, (item: TabbarItem, index: number) => {
        TabContent() {
          //点击页签显示的内容
          item.builder.builder()
        }
        .tabBar(this.tabarBuilder(item, index)) //TabContent的样式和内容
      })
    }.onChange((index: number) => {
      this.selectIndex = index;
    })
    .barPosition(BarPosition.End);
  }

  @Builder
  tabarBuilder(item: TabbarItem, index: number) {
    Column() {
      Image(this.selectIndex == index ? item.icon_selected : item.icon_normal)
        .width(28)
        .aspectRatio(1)
        .margin({ top: 5, bottom: 1 });
      Text(item.title)
        .width('100%')
        .height(14)
        .fontSize(10)
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .margin({ bottom: 7 });
    }
  }
}

TabbarItem.ets

import { View1Builder } from '../Views/View1_Page';
import { View2Builder } from '../Views/View2_Page';
import { View3Builder } from '../Views/View3_Page';
import { View4Builder } from '../Views/View4_Page';
import { View5Builder } from '../Views/View5_Page';

class TabbarItem {
  index: number = 0;
  title: string = '';
  icon_selected: Resource = $r('app.media.app_icon');
  icon_normal: Resource = $r('app.media.app_icon');
  builder: WrappedBuilder<[]> = wrapBuilder(TabbarBuilder);

  constructor(index: number, title: string, selectedIcon: Resource, normalIcon: Resource, builder: WrappedBuilder<[]>) {
    this.index = index;
    this.title = title;
    this.icon_selected = selectedIcon;
    this.icon_normal = normalIcon;
    this.builder = builder;
  }
}

@Builder
function TabbarBuilder() {

}


// tab集合
const TabbarItemList: TabbarItem[] = [
  new TabbarItem(0, "View1", $r('app.media.app_icon'), $r('app.media.app_icon'), wrapBuilder(View1Builder)),
  new TabbarItem(1, "View2", $r('app.media.app_icon'), $r('app.media.app_icon'), wrapBuilder(View2Builder)),
  new TabbarItem(2, "View3", $r('app.media.app_icon'), $r('app.media.app_icon'), wrapBuilder(View3Builder)),
  new TabbarItem(3, "View4", $r('app.media.app_icon'), $r('app.media.app_icon'), wrapBuilder(View4Builder)),
  new TabbarItem(4, "View5", $r('app.media.app_icon'), $r('app.media.app_icon'), wrapBuilder(View5Builder)),
]


export {
  TabbarItem, TabbarItemList
}

View1_Page.ets

@Builder
export function View1Builder(){
  View1_Page();
}

@Entry
@Component
struct View1_Page {
  @State message: string = 'View1';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('View1_PageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

效果

在这里插入图片描述
在这里插入图片描述

标签:index,封装,Tabs,media,app,TabbarItem,HarmonyOS,Page,icon
From: https://blog.csdn.net/Oneal5354/article/details/140469967

相关文章

  • vue2 简洁的行政区划选择组件封装
     vue2简洁的行政区划选择组件封装//判断变量是否为null或undefinedexportfunctionisNullOrEmpty(value){ returnvalue===null||value===undefined||value===''}//判断变量是否为null或undefinedexportfunctionisNullOrUndefined(value){ ret......
  • 类模板案例——数组类封装(vector<>的逻辑代码)
    .hpp文件#pragma#include<iostream>usingnamespacestd;template<classT>classMy_arry{public: My_arry(intcapacity)//赋初值 { this->m_capacity=capacity;//容量 this->m_Arry_size=0;//大小 this->m_Arry_Addres=newT[capacity];......
  • Lazarus 将LNET封装到DLL中
    最近工作中有个要求SOCKET的功能,想将一个通信功能做得简单一点。发现LNET非常方便,所以对它研究了一下。LNET有两种类型,可视化和非可视化。做WINDOWS下一般都是用可视化的。用于LINUX和WINCE,必须用非可视化的。我要将它封装成DLL的话,必须用非可视化的。DLL代码如下:librarypro......
  • HarmonyOS 开发者联盟高级认证最新题库
    本篇文章包含Next版本更新后高级认证题库中95%的题目。答案正确率50-60%,答案仅做参考。请在考试前重点看一遍题目,勿要盲目抄答案。欢迎在评论留言正确答案和未整理的题目。1、下面关于方舟字节码格式PREF_IMM16_v8_v8描述正确的是16位前缀操作码,16位立即数,2个8......
  • 面向2-封装、继承、多态
    封装、继承、多态继承的本质是对某一批类的抽象,从而实现对现实世界更好的建模extands关键字扩展封装/*封装-隐藏内部信息,通过接口访问1、“高内聚,低耦合”-该露的露,该藏得藏属性私有,get/set2、提高程序的安全性,保护数据3、隐藏代码的实现细节4、统一接口5、提高系统的......
  • 硬件开发笔记(二十六):AD21导入电感原理图库、封装库和3D模型
    前言  电阻,电容,电感还有各种基础的电子元器件、连接器和IC构成了各种实现功能的电子电路。  本篇介绍电感,并将贴片电感封装导入AD21,预览其三维模型。 贴片电感  贴片电感作为电子元件中的重要一员,因其小型化、高品质、高能量储存和低电阻等特性,在电子线路中发挥......
  • ElementUI 本身没有提供年份范围选择组件,但可以通过封装两个年份选择器来实现类似的功
    ElementUI本身没有提供年份范围选择组件,但可以通过封装两个年份选择器来实现类似的功能。以下是一个使用Vue2和ElementUI实现年份范围选择器的示例代码: <script>exportdefault{name:'YearRangePicker',//接收父组件传入的年份范围数据props:{value:{......
  • 封装C++项目为dll
    这是头文件,定义了一个接口类IMyInterface。#pragmaonce#ifndefMY_INTERFACE_H#defineMY_INTERFACE_H#define_CRT_SECURE_NO_WARNINGS#defineMY_DLL_API__declspec(dllexport)//定义导出到DLL中的宏//接口类,用于导出到DLLclassMY_DLL_APIIMyInterface{pub......
  • HarmonyOS NEXT 学习笔记3--登录页面(数据绑定)
    1.代码:import{promptAction}from'@kit.ArkUI'@Entry@ComponentstructPage_textInput_onchange{//@StateUI刷新测试[注意:不是双向绑定]username:string=''password:string=''build(){Column({space:20}){......
  • Allegro画焊盘封装
    Allegro画焊盘封装根据自己的理解和参考其他人的书籍总结一下用Allegro软件画焊盘的过程。本文档用的是17.4的版本。画焊盘封装用PadstackEditor软件,画元器件封装用Allegro软件。下面开始介绍使用PadstackEditor软件画焊盘封装。第一步:软件打开界面如下,注意左下角的单位选择,......