效果示例图

示例代码

import { window } from '@kit.ArkUI';@Entry
@Component
struct Index {//@Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景@Provide("pageInfo") pageInfo: NavPathStack = new NavPathStack();private tabsController: TabsController = new TabsController();@State currentIndex: number = 0;@State tabList: FooterTab[] = [{value: '资讯',icon: '/resources/base/media/home_no.png',activeIcon: '/resources/base/media/home_ok.png'}, {value: '赛事',icon: '/resources/base/media/match_no.png',activeIcon: '/resources/base/media/match_ok.png'}, {value: '指南',icon: '/resources/base/media/main_no.png',activeIcon: '/resources/base/media/main_ok.png'}, {value: '店铺',icon: '/resources/base/media/store_no.png',activeIcon: '/resources/base/media/store_ok.png'}, {value: '我的',icon: '/resources/base/media/mine_no.png',activeIcon: '/resources/base/media/mine_ok.png'}];@BuilderPageMap(name: string) {}@BuilderBottomTabBarBuilder(item: FooterTab, index: number) {Column() {if (index === 2) {Image(this.currentIndex === index ? item?.activeIcon : item?.icon).width(40).height(40).margin({top: -13});} else {Image(this.currentIndex === index ? item?.activeIcon : item?.icon).width(27).height(27);}Text(`${item?.value}`).margin({top: 6}).fontSize(12).fontColor(this.currentIndex === index ? '#EB5747' : '#ccc').fontWeight(this.currentIndex === index ? '500' : '400');}.justifyContent(FlexAlign.End).height(80).padding({bottom: 15});}/*** 在创建自定义组件的新实例后，在执行其build()函数之前执行* */aboutToAppear(): void {this.setWindowLayoutFullScreenAPI()}// 设置当前页面全屏显示setWindowLayoutFullScreenAPI() {console.log("测试设置当前页面全屏显示函数")window.getLastWindow(getContext()).then(windowStage => {windowStage.setWindowLayoutFullScreen(true)})}build() {Navigation(this.pageInfo) {Tabs({barPosition: BarPosition.End,controller: this.tabsController}) {TabContent() {Text('001');}.tabBar(this.BottomTabBarBuilder(this.tabList[0], 0));TabContent() {Text("002");}.tabBar(this.BottomTabBarBuilder(this.tabList[1], 1));TabContent() {Text("003");}.tabBar(this.BottomTabBarBuilder(this.tabList[2], 2));TabContent() {Text("004");}.tabBar(this.BottomTabBarBuilder(this.tabList[3], 3));TabContent() {Text("005");}.tabBar(this.BottomTabBarBuilder(this.tabList[4], 4));}//设置是否可以通过滑动页面进行页面切换.scrollable(false).barHeight(80).vertical(false).barBackgroundColor("transparent").expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]).onChange((index: number) => {console.log("[首页]", index)this.currentIndex = index;}).backgroundImage('/resources/base/media/bottomTabBg.png').backgroundImageSize({ width: '100%', height: 105 }).backgroundImagePosition(Alignment.BottomEnd);}.mode(NavigationMode.Stack)//设置是否隐藏工具栏.hideToolBar(true)//设置是否隐藏标题栏.hideTitleBar(true)//设置是否隐藏标题栏中的返回键.hideBackButton(true).navDestination(this.PageMap).backgroundColor("#f1f3f5").width('100%').height('100%');}
}interface FooterTab {value: string;icon: string;activeIcon: string;
}