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

进击的圆儿2025-04-18 18:55

引言：

首先可在鸿蒙开发者官网找到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("我的")
   }
  }
}

效果展示：