鸿蒙应用(医院陪诊系统)开发篇1·主页面的tabs布局

引言:

首先可在鸿蒙开发者官网找到DevEco Studio的安装教程。

安装好了之后,我们开始开发。

知识点:

tabs布局,鸿蒙官方文档地址:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5

具体代码:

D:\app12\entry\src\main\ets\pages\Index.ets,在pages目录的Index.ets中创建一个简单的tab布局,这里由一个Tabs作为其副组件,每一个子组件都是TabContent,设置tabBar显示内容

javascript 复制代码
@Entry
@Component
struct Index {//这里定义了一个组件
  build() {
   Tabs({barPosition:BarPosition.End}){//这里定义了一个标签栏,并且设置了位置在底部
     TabContent(){
        
     }.tabBar("首页")//这里定义了一个标签栏的内容,并且设置了标题为"首页",tabBar是一个方法,可以设置标签栏的标题
     TabContent(){

     }.tabBar("订单")
     TabContent(){

     }.tabBar("我的")
   }
  }
}

效果:

可以在TabContent里添加自定义组件,比如创建一个新的home.ets,

javascript 复制代码
@Component//这里定义了一个组件
export default struct home {//export default 是一个关键字,表示这个组件是默认导出的,可以被其他文件引入

  build() {
   Text("hello")
  }
}

然后在index.ets中引入home组件并使用

cpp 复制代码
import home from './home'

@Entry
@Component
struct Index {
  build() {
   Tabs({barPosition:BarPosition.End}){
     TabContent(){
        home()
     }.tabBar("首页")
     TabContent(){

     }.tabBar("订单")
     TabContent(){

     }.tabBar("我的")
   }
  }
}

效果展示:

相关推荐
安卓开发者3 小时前
鸿蒙NEXT主题设置指南:应用级与页面级主题定制详解
华为·harmonyos
深盾科技9 小时前
鸿蒙ABC开发中的名称混淆与反射处理策略:安全与效率的平衡
安全·华为·harmonyos
2501_9197490310 小时前
鸿蒙:获取UIContext实例的方法
华为·harmonyos
王佳斌13 小时前
tp报错解决
harmonyos
coooliang13 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
江拥羡橙15 小时前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
爱笑的眼睛1115 小时前
HarmonyOS应用开发:深入ArkUI声明式开发范式与最佳实践
华为·harmonyos
云水木石15 小时前
开源鸿蒙+龙芯CPU,能擦出怎样的火花?
华为·开源·harmonyos
特立独行的猫a16 小时前
开源OpenHarmony润开鸿HH-SCDAYU800A开发板开箱体验
开源·harmonyos·openharmony·hh-scdayu800a
祥睿夫子18 小时前
鸿蒙 ArkTS 函数全解析:从基础定义到高级应用,新手也能轻松掌握
harmonyos