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

效果展示:

相关推荐
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划2 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core4 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡4 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说4 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
funnycoffee1235 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
制造数字化方案研究院5 小时前
59页|PPT|华为集成服务交付ISD业务变革总体方案:业务规则、流程、IT、组织及度量“四位一体”的管理体系
运维·华为
博睿谷IT99_5 小时前
华为物联网认证:开启万物互联的钥匙
物联网·华为·华为认证·职业规划
遇到困难睡大觉哈哈17 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划20 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos