🌟 Developing HarmonyOS applications with ArkTS: Implementation of the bottom navigation bar
Code Analysis
Import the module
import { router } from '@kit.ArkUI';
import { httpRequestGet } from '.. /Utils/HttpUtils';
import { LoginModel, LoginModelUser } from '.. /model/LoginModel';
import promptAction from '@ohos.promptAction';
import { common } from '@kit.AbilityKit';
import { PositionList } from '.. /pages/PositionList';
import { MessageList } from '.. /pages/MessageList';
import { CompanyList } from '.. /pages/CompanyList';
import My from '.. /pages/My';
Multiple modules have been imported to implement functions such as route jumps, HTTP requests, prompt boxes, and bottom navigation bars.
- Define the home page component
@Entry
@Component
struct Home {
private backtime: number = 0;
@State message: string = 'Hello World';
@State tabindex: number = 0;
private controller: TabsController = new TabsController();
@State tablist: TableInterface[] = [
{
id: 0,
title: "Position"
icon: $r('app.media.ic_main_tab_company_pre'),
selecticon: $r('app.media.ic_main_tab_company_nor')
},
{
id: 1,
title: "Company"
icon: $r('app.media.ic_main_tab_find_pre'),
selecticon: $r('app.media.ic_main_tab_find_nor')
},
{
id: 2,
title: "Message"
icon: $r('app.media.ic_main_tab_contacts_pre'),
selecticon: $r('app.media.ic_main_tab_contacts_nor')
},
{
id: 3,
title: "Mine ",
icon: $r('app.media.ic_main_tab_my_pre'),
selecticon: $r('app.media.ic_main_tab_my_nor')
}
];
A component named Home has been defined.
The tabindex is defined using the @State decorator to store the index of the currently selected label.
A controller was defined to control the switching of tags.
tablist was defined to store the tag information of the bottom navigation bar.
- Construction method of tag items
tabBarItem(item: TableInterface) {
Column() {
Image(item.id === this.tabindex ? item.icon : item.selecticon)
.width(25)
.height(25)
.margin({ top: 5 })
Text(item.title)
.fontSize(20)
.fontColor(item.id === this.tabindex ? Color.Green : Color.Black)
.margin({ top: 5 })
}.height(60)
.width("100%")
}`
A tabBarItem method was defined for constructing the UI of each tag item.
Dynamically switch the icon and text colors based on the currently selected TAB index tabindex.
- Page layout
`build() {
Row() {
Tabs({ index: $$this.tabindex, controller: this.controller }) {
ForEach(this.tablist, (item: TableInterface, index: number) => {
TabContent() {
if (0 === index) {
PositionList();
} else if (1 === index) {
CompanyList();
} else if (2 === index) {
MessageList();
} else if (3 === index) {
My();
}
}.tabBar(this.tabBarItem(item))
})
}.barPosition(BarPosition.End)
.scrollable(false) // Remove the sliding effect
.onChange((index: number) => {
this.tabindex = index;
this.controller.changeIndex(this.tabindex);
})
}.alignItems(VerticalAlign.Center)
.height("100%")
}`
Use the Row and Tabs layout components to build the UI of the homepage.
Use ForEach to traverse the tablist and generate the corresponding TabContent for each tag item.
Dynamically switch the displayed functional pages based on the currently selected TAB index tabindex.
Use the onChange event to listen for tag switching and update the indexes of tabindex and controller.
- Return key processing
`onBackPress(): boolean | void {
let nowtime = Date.now();
if (nowtime - this.backtime < "1000) {"
const mContext = getContext(this) as common.UIAbilityContext;
mContext.terminateSelf();
} else {
this.backtime = nowtime;
promptAction.showToast({
message: "Press Exit Application again"
});
}`
return true;
The onBackPress method is defined to handle the return key event.
If the user clicks the back key twice consecutively within 1 second, the application will be exited. Otherwise, a prompt message will be displayed.
Summary
Through the above code, we have achieved the tag switching of the bottom navigation bar and the corresponding functional page display. Users can switch to different functional pages by clicking on the tags in the bottom navigation bar. In addition, the anti-shake processing of the back key has also been implemented, enhancing the user experience.
Top comments (0)