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

效果展示:

相关推荐
zhanshuo7 小时前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo7 小时前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish79812 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw17 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
小徐不徐说1 天前
每日一算:华为-批萨分配问题
数据结构·c++·算法·leetcode·华为·动态规划·后端开发
搜狐技术产品小编20232 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo2 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo2 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo2 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo2 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos