HarmonyOS 需要频道导航栏功能样例

新闻类app的频道功能开发,需要在Tabs后面加上image作为按钮点击跳转到频道自定义页面,请问这个怎么布局?

Row(){Tabs()image()}这种形式会导致 Tabs里面的TabContent不能占满宽度

HarmonyOS
2024-12-20 17:10:36
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

请参考如下示例代码

import { router } from '@kit.ArkUI';
@Entry
@Component
struct AAA {
  build() {
    Column() {
      Stack(){
        Tabs({ barPosition: BarPosition.End, controller: this.controller001 }) {
          TabContent() {
            Column() {
              Text('Tab1')
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }.width('100%')
          }.tabBar(this.tabBuilder001(0))
          TabContent() {
            Column() {
              Text('Tab2')
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }.width('100%')
          }.tabBar(this.tabBuilder001(1))
          TabContent() {
            Column() {
              Text('Tab3')
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }.width('100%')
          }.tabBar(this.tabBuilder001(2))
          TabContent() {
            Column() {
              Text('Tab4')
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }.width('100%')
          }.tabBar(this.tabBuilder001(3))
        }
        .vertical(false)
        .barHeight(56)
        .onChange((index: number) => {
          this.currentIndex = index
        })
        .width(360)
        .height(190)
        .backgroundColor('#F1F3F5')
        .margin({ top: 38 })
        Image($r("app.media.app_icon"))
          .width('5%')
          .margin({top:180,left:320})
          .onClick(() => {
            console.info("hello")
            router.pushUrl({url:"pages/page2"})
          })
      }
    }.width('100%')
  }
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller001: TabsController = new TabsController()
  @Builder
  tabBuilder001(index: number) {
    Column() {
      Text(`Tab${index + 1}`)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%')
  }
}
分享
微博
QQ
微信
回复
2024-12-20 19:51:44
相关问题
HarmonyOS 直播功能的指南与代码
416浏览 • 1回复 待解决
HarmonyOS 请提供dsbridge代码
264浏览 • 1回复 待解决
HarmonyOS 能否提供Web工程代码?
563浏览 • 1回复 待解决
HarmonyOS 运行工程,报App Launch
911浏览 • 1回复 待解决
HarmonyOS 能否提供登录界面demo?
595浏览 • 1回复 待解决
HarmonyOS 应用并发同步的代码
744浏览 • 1回复 待解决
HarmonyOS 请提供登录页面的实现
740浏览 • 1回复 待解决
HarmonyOS能否提供数据存储的工程
820浏览 • 1回复 待解决
HarmonyOS 怎么去掉底部导航
493浏览 • 1回复 待解决
HarmonyOS 怎么禁用原生导航
540浏览 • 1回复 待解决
获取状态导航高度
1092浏览 • 1回复 待解决
Navigation如何隐藏导航
2618浏览 • 1回复 待解决
关于sidebar侧边遮挡导航的问题
856浏览 • 1回复 待解决
HarmonyOS 导航主题色如何配置
496浏览 • 1回复 待解决
HarmonyOS 如何获取顶部导航高度
493浏览 • 1回复 待解决
HarmonyOS 如何获取底部导航高度?
509浏览 • 1回复 待解决
HarmonyOS 导航跳转后重置栈
530浏览 • 1回复 待解决
HarmonyOS上对导航怎么适配?
512浏览 • 1回复 待解决