鸿蒙ArkTS Tabs组件开发底部导航栏，可自适应平板和手机，相当于Android开发中的MainActivity+Fragment的底部导航栏模式。
一、主页：MainPage.ets
import { BreakpointSystem, BreakpointConstants, StyleConstants, PageConstants, } from '@ohos/common';? // 通用工具
import { Chat } from '@ohos/chat';? // 子模块 相当于Android 的Fragment
import { Contact } from '@ohos/Contact';? // 子模块
import { Work } from '@ohos/Work';? //? 子模块
import { Mine } from '@ohos/Mine';? //? 子模块
import { buttonInfo, ButtonInfoModel } from '../viewmodel/MainPageData'; // 底部导航数据
@Entry
@Component
struct MainPage {
? @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
? @State currentPageIndex: number = 0;
? private breakpointSystem = new BreakpointSystem();
? aboutToAppear() {
? ? this.breakpointSystem.register();
? }
? aboutToDisappear() {
? ? this.breakpointSystem.unregister();
? }
? @Builder BottomNavigation(button: ButtonInfoModel) {
? ? Column({ space: PageConstants.BUTTON_SPACE }) {? //? static readonly BUTTON_SPACE: string = '6vp';
? ? ? Image(this.currentPageIndex === button.index button.selectImg : button.img)
? ? ? ? .objectFit(ImageFit.Contain)
? ? ? ? .width($r('app.float.main_image_size'))
? ? ? ? .height($r('app.float.main_image_size'))
? ? ? Text(button.title)
? ? ? ? .fontColor(this.currentPageIndex === button.index $r('app.color.focus_color') : $r('app.color.un_focus_color'))
? ? ? ? .opacity(this.currentPageIndex === button.index StyleConstants.FULL_OPACITY : StyleConstants.SIXTY_OPACITY)
? ? ? ? .fontWeight(StyleConstants.FONT_WEIGHT_FIVE)
? ? ? ? .textAlign(TextAlign.Center)
? ? ? ? .fontSize($r('app.float.micro_font_size'))
? ? }
? ? .width(StyleConstants.FULL_WIDTH)
? ? .height(StyleConstants.FULL_HEIGHT)
? ? .alignItems(HorizontalAlign.Center)
? ? .justifyContent(FlexAlign.Center)
? }
? build() {
? ? Column() {
? ? ? Tabs({
? ? ? ? barPosition: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG
? ? ? ? BarPosition.Start : BarPosition.End,
? ? ? ? index: this.currentPageIndex,
? ? ? }) {
? ? ? ? TabContent() {
? ? ? ? ? Chat() // 子模块
? ? ? ? }.tabBar(this.BottomNavigation(buttonInfo[0]))
? ? ? ? TabContent() {
? ? ? ? ? Contact() // 子模块
? ? ? ? }.tabBar(this.BottomNavigation(buttonInfo[1]))
? ? ? ? TabContent() {
? ? ? ? ? Work() // 子模块
? ? ? ? }.tabBar(this.BottomNavigation(buttonInfo[2]))
? ? ? ? TabContent() {
? ? ? ? ? Mine() // 子模块
? ? ? ? }.tabBar(this.BottomNavigation(buttonInfo[3]))
? ? ? }
? ? ? .barWidth(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG
? ? ? $r('app.float.bar_width') : StyleConstants.FULL_WIDTH)
? ? ? .barHeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG
? ? ? StyleConstants.SIXTY_HEIGHT : $r('app.float.vp_fifty_six'))
? ? ? .vertical(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG)
? ? ? .scrollable(false)
? ? ? .onChange((index: number) => {
? ? ? ? this.currentPageIndex = index;
? ? ? ? // 提前查询数据
? ? ? ? // if (index === 1) {
? ? ? ? //? this.queryShopCart();
? ? ? ? // } else if (index === 2) {
? ? ? ? //? this.queryOrderList();
? ? ? ? // }
? ? ? })
? ? }
? ? .backgroundColor($r('app.color.page_background'))
? }
}
StyleConstants.ets:
/**
* Constants for common style.
*/
export class StyleConstants {
? /**
? * Component width percentage: 100%.
? */
? static readonly FULL_WIDTH: string = '100%';
? /**
? * Component height percentage: 100%.
? */
? static readonly FULL_HEIGHT: string = '100%';
? /**
? * Component height percentage: 70%.
? */
? static readonly SEVENTY_HEIGHT: string = '70%';
? /**
? * Component height percentage: 60%.
? */
? static readonly SIXTY_HEIGHT: string = '60%';
? /**
? * Component width percentage: 60%.
? */
? static readonly SIXTY_WIDTH: string = '60%';
? /**
? * Component height percentage: 50%.
? */
? static readonly FIFTY_HEIGHT: string = '50%';
? /**
? * Component height percentage: 50%.
? */
? static readonly HUNDRED_FIFTEEN_WIDTH: string = '115%';
? /**
? * Component space vp : 4.
? */
? static readonly FOUR_SPACE: string = '4vp';
? /**
? * Component space vp : 12.
? */
? static readonly TWELVE_SPACE: string = '12vp';
? /**
? * Component space vp : 14.
? */
? static readonly ITEM_SPACE: string = '14vp';
? /**
? * Component space vp : 15.
? */
? static readonly FIFTEEN_SPACE: string = '15vp';
? /**
? * Font weight value: 700.
? */
? static readonly FONT_WEIGHT_SEVEN: number = 700;
? /**
? * Font weight value: 500.
? */
? static readonly FONT_WEIGHT_FIVE: number = 500;
? /**
? * Font weight value: 400.
? */
? static readonly FONT_WEIGHT_FOUR: number = 400;
? /**
? * Text line value: 2.
? */
? static readonly TWO_TEXT_LINE: number = 2;
? /**
? * Component opacity value: 1.
? */
? static readonly FULL_OPACITY: number = 1;
? /**
? * Component opacity value: 0.6.
? */
? static readonly SIXTY_OPACITY: number = 0.6;
? /**
? * Component opacity value: 0.8.
? */
? static readonly EIGHTY_OPACITY: number = 0.8;
? /**
? * Component layout value: 1.
? */
? static readonly LAYOUT_WEIGHT: number = 1;
? /**
? * Flex basic value: 1.
? */
? static readonly FLEX_BASIC: number = 1;
? /**
? * Flex shrink value: 1.
? */
? static readonly FLEX_SHRINK: number = 1;
? /**
? * Flex grow value: 1.
? */
? static readonly FLEX_GROW: number = 1;
? /**
? * Swiper or list display count value: 1.
? */
? static readonly DISPLAY_ONE: number = 1;
? /**
? * Swiper or list display count value: 2.
? */
? static readonly DISPLAY_TWO: number = 2;
? /**
? * Swiper or list display count value: 3.
? */
? static readonly DISPLAY_THREE: number = 3;
? /**
? * Swiper or list display count value: 4.
? */
? static readonly DISPLAY_FOUR: number = 4;
? /**
? * Image aspect ratio value: 2.23.
? */
? static readonly IMAGE_ASPECT_RATIO: number = 2.25;
? /**
? * Number of value: 0.5.
? */
? static readonly HALF_ONE: number = 0.5;
? /**
? * Number of value: -1.
? */
? static readonly MINUS_ONE: number = -1;
}
二、BreakpointSystem.ets：响应式设计的核心
import mediaQuery from '@ohos.mediaquery';
import { BreakpointConstants } from '../constants/BreakpointConstants';
declare interface BreakPointTypeOption<T> {
? sm?: T
? md?: T
? lg?: T
? xl?: T
? xxl?: T
}
/**
* 媒体查询（mediaquery）
* 响应式设计的核心
*/
export class BreakPointType<T> {
? options: BreakPointTypeOption<T>
? constructor(option: BreakPointTypeOption<T>) {
? ? this.options = option
? }
? getValue(currentBreakPoint: string): T {
? ? return this.options[currentBreakPoint] as T
? }
}
export class BreakpointSystem {
? private currentBreakpoint: string = '';
? private smListener?: mediaQuery.MediaQueryListener;
? private mdListener?: mediaQuery.MediaQueryListener;
? private lgListener?: mediaQuery.MediaQueryListener;
? private updateCurrentBreakpoint(breakpoint: string) {
? ? if (this.currentBreakpoint !== breakpoint) {
? ? ? this.currentBreakpoint = breakpoint;
? ? ? AppStorage.Set<string>(BreakpointConstants.CURRENT_BREAKPOINT, this.currentBreakpoint);
? ? }
? }
? private isBreakpointSM = (mediaQueryResult: mediaQuery.MediaQueryResult) => {
? ? if (mediaQueryResult.matches) {
? ? ? this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_SM);
? ? }
? }
? private isBreakpointMD = (mediaQueryResult: mediaQuery.MediaQueryResult) => {
? ? if (mediaQueryResult.matches) {
? ? ? this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_MD);
? ? }
? }
? private isBreakpointLG = (mediaQueryResult: mediaQuery.MediaQueryResult) => {
? ? if (mediaQueryResult.matches) {
? ? ? this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_LG);
? ? }
? }
? public register() {
? ? this.smListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_SM);
? ? this.smListener.on('change', this.isBreakpointSM);
? ? this.mdListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_MD);
? ? this.mdListener.on('change', this.isBreakpointMD);
? ? this.lgListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_LG);
? ? this.lgListener.on('change', this.isBreakpointLG);
? }
? public unregister() {
? ? this.smListener?.off('change', this.isBreakpointSM);
? ? this.mdListener?.off('change', this.isBreakpointMD);
? ? this.lgListener?.off('change', this.isBreakpointLG);
? }
}
BreakpointConstants.ets:
export class BreakpointConstants {
? /**
? * Breakpoints that represent small device types.
? */
? static readonly BREAKPOINT_SM: string = 'sm';
? /**
? * Breakpoints that represent middle device types.
? */
? static readonly BREAKPOINT_MD: string = 'md';
? /**
? * Breakpoints that represent large device types.
? */
? static readonly BREAKPOINT_LG: string = 'lg';
? /**
? * Current breakpoints that to query the device types.
? */
? static readonly CURRENT_BREAKPOINT: string = 'currentBreakpoint';
? /**
? * Range of the small device width.
? */
? static readonly RANGE_SM: string = '(320vp<=width<520vp)';
? /**
? * Range of the middle device width.
? */
? static readonly RANGE_MD: string = '(520vp<=width<840vp)';
? /**
? * Range of the large device width.
? */
? static readonly RANGE_LG: string = '(840vp<=width)';
}
三、ButtonInfoModel.ets：底部导航按钮数据
export class ButtonInfoModel {
? index: number ;? // 序号
? img: Resource;? // 未选中图片
? selectImg: Resource ; // 选中图片
? title: Resource; // 按钮名称
}
const buttonInfo: ButtonInfoModel[] = [
? {
? ? index: 0,
? ? img: $r('app.media.ic_chat_off'),
? ? selectImg: $r('app.media.ic_chat_on'),
? ? title: $r('app.string.chat')
? },
? {
? ? index: 1,
? ? img: $r('app.media.ic_contact_off'),
? ? selectImg: $r('app.media.ic_contact_on'),
? ? title: $r('app.string.contact')
? },
? {
? ? index: 2,
? ? img: $r('app.media.ic_work_off'),
? ? selectImg: $r('app.media.ic_work_on'),
? ? title: $r('app.string.work')
? },
? {
? ? index: 3,
? ? img: $r('app.media.ic_mine_off'),
? ? selectImg: $r('app.media.ic_mine_on'),
? ? title: $r('app.string.mine')
? }
]
export { buttonInfo }