一, 先看效果
二, 新建一个ts文件
三, ts代码
export const pagePadding:number = 15;
export const miniPadding:number = 5;
export const smallPadding:number = 10;
export const smallIconSize:number = 20;
export const middlIconSize:number = 30;
export const bigIconSize:number = 40;
export const normalFontSize:number = 15;
export const bigFontSize:number = 25;
export const smallBorderRaduis:number = 10;
export const blockBorderRaduis:number = 15;
export const smallAvaterSize:number = 30;
export const middleAvaterSize:number = 40;
export const roundedSquareSize:number = 60;
export const bigAvaterSize:number = 80;
export const swiperHeight:number = 180;
export const lineHeight:number = 20;
export const lineWidth:number = 5;
export const movieWidth:number = 150;
export const movieHeight:number = 200;
export const webviewHeight:number = 300;
export const dialogBtnHeight:number = 60;
export const btnWidth:number = 100;
export const inputHeight:number = 40;
export const opacity:number = 0.5;
export const popupMenuWidth:number = 200;
export const popupMenuHeight:number = 40;
export const barHeight:number = 70;
四, arkui 样式
import * as size from '../components/size'
@Entry
@Component
struct Index {
@State
activeIndex: number = 0;
@State
isInitPage: Array<boolean> = [true, false, false, false];
@Builder tabBuilder(index: number, title: string, selectedImage: Resource, normalImage: Resource) {
Column() {
Image(this.activeIndex == index ? selectedImage : normalImage)
.width(size.middlIconSize)
.height(size.middlIconSize)
.margin({ top: size.smallPadding, bottom: size.smallPadding })
Text(title)
.fontColor(this.activeIndex == index ? '#9dc912' : '#ccc')
.fontSize(size.normalFontSize)
.padding({ bottom: size.pagePadding })
}
.width('100%')
.justifyContent(FlexAlign.Center)
}
@Builder center() {
Row()
}
build() {
Column(){
Stack() {
Tabs({
index: this.activeIndex,
barPosition: BarPosition.End
}) {
TabContent() {
Text('首页')
}
.tabBar(this.tabBuilder(0, '首页', $r('app.media.wode1'), $r('app.media.wode')))
.backgroundColor('#ccc')
TabContent() {
Text('推荐')
}
.tabBar(this.tabBuilder(1, '推荐', $r('app.media.fuwu1'), $r('app.media.fuwu')))
.backgroundColor('#ccc')
TabContent() {}
.tabBar(this.center())
.backgroundColor('#ccc')
TabContent() {
Text('消息')
}
.tabBar(this.tabBuilder(3, '消息', $r('app.media.fuwu1'), $r('app.media.fuwu')))
.backgroundColor('#ccc')
TabContent() {
Text('我的')
}
.tabBar(this.tabBuilder(4, '我的', $r('app.media.XIAOXI1'), $r('app.media.xiaoxi')))
.backgroundColor('#ccc')
}
.barHeight(size.barHeight)
.barMode(BarMode.Fixed)
.onChange((index) => {
this.isInitPage[index] = true;
this.activeIndex = index
console.log(this.activeIndex.toString())
})
// 底部导航栏中间凸起
Image($r('app.media.ic_tabbar_icon_3_selected'))
.margin({bottom:size.barHeight - size.bigAvaterSize/2 - size.miniPadding})
.height(size.bigAvaterSize + size.miniPadding * 2)
.height(size.bigAvaterSize + size.miniPadding * 2)
// 设置悬浮图标居中对齐
.alignSelf(ItemAlign.Center)
.borderRadius(size.bigAvaterSize + size.miniPadding * 2)
.backgroundColor(Color.White)
.border({
width: size.miniPadding,
color: Color.Gray,
style: BorderStyle.Solid
})
}
.width('100%')
.height('100%')
.alignContent(Alignment.Bottom)
}
}
}