OpenHarmony实现聊天UI-创建tab页面
创建tab页面,效果如图
代码如下:
@Entry@Componentstruct Index { private controller: TabsController = new TabsController() build() { Row() { Tabs({ barPosition: BarPosition.End, controller: this.controller }) { TabContent() { Column(){ Text($r('app.string.messages')) }.width('100%').height('100%').backgroundColor(Color.White) }.tabBar($r('app.string.messages')) TabContent() { Column(){ Text($r('app.string.contact')) }.width('100%').height('100%').backgroundColor(Color.White) }.tabBar($r('app.string.contact')) TabContent() { Column(){ Text($r('app.string.discover')) }.width('100%').height('100%').backgroundColor(Color.White) }.tabBar($r('app.string.discover')) TabContent() { Column(){ Text($r('app.string.me')) }.width('100%').height('100%').backgroundColor(Color.White) }.tabBar($r('app.string.me')) }.barWidth('100%') .barHeight(60) .animationDuration(400) .onChange((index: number) => { console.info(index.toString()) }) .width('100%') .height('100%') .backgroundColor(0xF5F5F5) }.width('100%') .height('100%') }}
代码已上传gitee后续不断更新
代码地址:WeChat: 开源鸿蒙 openharmony 仿微信UI ArkUI (gitee.com)