In Hongmeng development, the tab switching function (as shown in the figure below) is a very common function. How to implement the following function is described today? What data do I need to prepare for development?
Today we will describe from four aspects: "data preparation", "Tabs function realization", "bottom button function realization" and "operation effect"
1. Development preparation
1.1 Data preparation If you want to achieve the function as shown above, you need to learn " Tabs ", " TabContent ", " Row ", " Column ", and other related technologies
1.2 Picture preparation Prepare six pictures (pictures below) and put them in resources/base/ under the media/ directory
Where the pictures are stored
2. Tabs function implementation
2.1 For details, please refer to the official documentation of " Tabs " and " TabContent
". The codes are as follows
@Entry
@Component
struct MyNewsIndex {
private controller: TabsController = new TabsController()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Tabs({ controller: this.controller }) {
TabContent() {
Text("首页")
.width('100%').height('100%')
.fontSize(50)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.backgroundColor(Color.Pink)
}.tabBar('首页')
TabContent() {
Text("消息")
.width('100%').height('100%')
.fontSize(50)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.backgroundColor(Color.Blue)
}.tabBar('消息')
TabContent() {
Text("我的")
.width('100%').height('100%')
.fontSize(50)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.backgroundColor(Color.Red)
}.tabBar('我的')
}
.scrollable(false)
.barHeight(0)
.animationDuration(0)
}.alignItems(VerticalAlign.Bottom).width('100%').height(120).margin({top:0,right:0,bottom:10,left:0})
}
.width('100%')
.height('100%')
}
}The effect is as follows
3 Bottom button function realization
3.1 The bottom function is mainly realized by using " Row ", " Column ", " Text ", " Image " and other related technologies, the code is as follows
Row() {
Column(){
Image($r('app.media.index_select'))
.width(60).height(60)
Text('首页')
.size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
.fontSize(20)
.fontColor(Color.Red)
}
.layoutWeight(1)
.backgroundColor(0xFFEFD5)
.height("100%")
Column(){
Image($r('app.media.msg_unselect'))
.width(60).height(60)
Text('消息')
.size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
.fontSize(20)
.fontColor(Color.Black)
}
.layoutWeight(1)
.backgroundColor(0xFFEFD5)
.height("100%")
Column(){
Image($r('app.media.my_unselect'))
.width(60).height(60)
Text('我的')
.size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
.fontSize(20)
.fontColor(Color.Black)
}
.layoutWeight(1)
.backgroundColor(0xFFEFD5)
.height("100%")
}.alignItems(VerticalAlign.Bottom).width('100%').height(120).margin({top:0,right:0,bottom:10,left:0})4 running effects
4.1 Implementation of Tabs and button linkage problem
We are defining a global variable SelectPos as the currently selected index. When the button is clicked, the current index is assigned, and the Image and font color are changed. The whole code is as follows
@Entry
@Component
struct MyNewsIndex {
private controller: TabsController = new TabsController()
@State SelectPos:number=0;
public IndexClick(){
this.SelectPos=0;
this.controller.changeIndex(0)
}
public messageClick(){
this.SelectPos=1;
this.controller.changeIndex(1)
}
public myClick(){
this.SelectPos=2;
this.controller.changeIndex(2)
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Tabs({ controller: this.controller }) {
TabContent() {
Text("首页")
.width('100%').height('100%')
.fontSize(50)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.backgroundColor(Color.Pink)
}.tabBar('首页')
TabContent() {
Text("消息")
.width('100%').height('100%')
.fontSize(50)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.backgroundColor(Color.Blue)
}.tabBar('消息')
TabContent() {
Text("我的")
.width('100%').height('100%')
.fontSize(50)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.backgroundColor(Color.Red)
}.tabBar('我的')
}
.scrollable(false)
.barHeight(0)
.animationDuration(0)
Row() {
Column(){
Image((this.SelectPos==0?$r('app.media.index_select'):$r('app.media.index_unselect')))
.width(60).height(60)
Text('首页')
.size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
.fontSize(20)
.fontColor((this.SelectPos==0?Color.Red:Color.Black))
}
.layoutWeight(1)
.backgroundColor(0xFFEFD5)
.height("100%")
.onClick(this.IndexClick.bind(this))
Column(){
Image((this.SelectPos==1?$r('app.media.msg_select'):$r('app.media.msg_unselect')))
.width(60).height(60)
Text('消息')
.size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
.fontSize(20)
.fontColor((this.SelectPos==1?Color.Red:Color.Black))
}
.layoutWeight(1)
.backgroundColor(0xFFEFD5)
.height("100%")
.onClick(this.messageClick.bind(this))
Column(){
Image((this.SelectPos==2?$r('app.media.my_select'):$r('app.media.my_unselect')))
.width(60).height(60)
Text('我的')
.size({ width: '100%', height: 60 }).textAlign(TextAlign.Center)
.fontSize(20)
.fontColor((this.SelectPos==2?Color.Red:Color.Black))
}
.layoutWeight(1)
.backgroundColor(0xFFEFD5)
.height("100%")
.onClick(this.myClick.bind(this))
}.alignItems(VerticalAlign.Bottom).width('100%').height(120).margin({top:0,right:0,bottom:10,left:0})
}
.width('100%')
.height('100%')
}
}The operation effect is as follows
