鸿蒙应用(医院陪诊系统)开发篇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("我的")
   }
  }
}

效果展示:

相关推荐
Devil枫1 小时前
HarmonyOS 广告服务 ArkTS 实现指南:从激励广告到多形式适配
华为·harmonyos
猫林老师5 小时前
HarmonyOS 5 性能优化全攻略:从启动加速到内存管理
华为·性能优化·harmonyos
GIS小小研究僧5 小时前
华为电脑 银河麒麟系统 使用CrossOver安装微软Office2016
华为·电脑·银河麒麟
猫林老师6 小时前
HarmonyOS 5 手势系统与高级交互动效开发实战
华为·交互·harmonyos
chensi_076 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos
搬砖的小码农_Sky9 小时前
鸿蒙(HarmonyOS)应用开发技能栈
harmonyos·鸿蒙系统
D.....l10 小时前
Hi3861 OpenHarmony鸿蒙开发(嵌入式方向) (一)
华为·harmonyos
代码797213 小时前
【无标题】使用 Playwright 实现跨 Chromium、Firefox、WebKit 浏览器自动化操作
运维·前端·深度学习·华为·自动化
yenggd13 小时前
华为bgp路由的各种控制和团体属性及orf使用案例
网络·华为
COWORKSHOP13 小时前
华为芯片泄密案警示:用Curtain e-locker阻断内部数据泄露
运维·服务器·前端·数据库·安全·华为