鸿蒙应用（医院陪诊系统）开发篇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显示内容

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

效果：

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

@Component//这里定义了一个组件
export default struct home {//export default 是一个关键字,表示这个组件是默认导出的,可以被其他文件引入build() {Text("hello")}
}

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

import home from './home'@Entry
@Component
struct Index {build() {Tabs({barPosition:BarPosition.End}){TabContent(){home()}.tabBar("首页")TabContent(){}.tabBar("订单")TabContent(){}.tabBar("我的")}}
}

效果展示：