OpenHarmony/HarmonyOS微信的Tab按钮
我们今天就来仿一个微信的Tab按钮
以下是今天的内容。
作者：坚果
团队：坚果派
公众号：“大前端之旅”
润开鸿技术专家，华为HDE，InfoQ签约作者，OpenHarmony布道师，擅长HarmonyOS应用开发、熟悉服务卡片开发，在“战码先锋”活动中作为大队长，累计培养三个小队长，带领100+队员完成Pr的提交合入。
欢迎通过主页或者私信联系我，加入坚果派，一起学习OpenHarmony/HarmonyOS应用开发。
效果
源码
@Entry
@Component
struct MainPage {
@State fontColor: Color = Color.Grey
@State selectedFontColor: Color = Color.Orange
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
@Builder TabBuilder(index: number, name: string) {
Column() {
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
.margin({
top: 17, bottom: 7 })
}.width('100%')
}
build() {
Column() {
Tabs({
barPosition: BarPosition.End, controller: this.controller }) {
TabContent() {
Column(){
Text("微信").fontSize(50)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}.tabBar(this.TabBuilder(0, '微信'))
TabContent() {
Column(){
Text("xjg13690").fontSize(50)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}.tabBar(this.TabBuilder(1, '通讯录'))
TabContent() {
Column(){
Text("发现").fontSize(50)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}.tabBar(this.TabBuilder(2, '发现'))
TabContent() {
Column(){
Text("坚果").fontSize(50)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}.tabBar(this.TabBuilder(3, '我'))
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.animationDuration(400)
.onChange((index: number) => {
this.currentIndex = index
})
.width(360)
.backgroundColor('#F1F3F5')
}.width('100%')
}
}
完毕