零基础开始学习鸿蒙开发-页面导航栏布局设计

目录

1.设定初始页(Idex.ets)

2.自定义首页组件

3.自定义发现页面组件

4.自定义设置页面组件

总结:主要是运用 了Tabs组件对导航栏进行布局，然后运用BottomTabBarStyle组件嵌套图标和文字，完成导航栏的制作。

---

1.设定初始页(Idex.ets)

import {find} from '../pages/find'
import {home} from '../pages/home'
import {setting} from '../pages/setting'
@Entry
@Component
struct Index {private controller: TabsController = new TabsController()@State gridMargin: number = 10@State gridGutter: number = 10@State sm: number = -2@State clickedContent: string = "";build() {Column() {Tabs({ barPosition: BarPosition.End, controller: this.controller }) {TabContent() {home({message:'首页'})}.tabBar(new BottomTabBarStyle($r("app.media.home"), "首页"))TabContent() {find({message:'发现'})}.tabBar(new BottomTabBarStyle($r("app.media.find"), "发现"))TabContent() {setting({message:'设置'})}.tabBar(new BottomTabBarStyle($r("app.media.setting"), "设置"))}.animationDuration(800).height('100%').backgroundColor(0xf1f3f5)}.width('100%').height('100%')}
}

效果如下:

2.自定义首页组件

@Entry
@Component
export struct home {@State message: string = '首页'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

3.自定义发现页面组件

// Index.ets
@Entry
@Component
export struct find {@State message: string = '发现'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

4.自定义设置页面组件

// Index.ets
@Entry
@Component
export struct setting {@State message: string = '发现'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

总结:主要是运用 了Tabs组件对导航栏进行布局，然后运用BottomTabBarStyle组件嵌套图标和文字，完成导航栏的制作。