HarmonyOS Tabs 控件 底部显示不全

Tabs 控件 底部显示不全 TabContent() 中的页面,底部显示不全

HarmonyOS
2024-12-20 16:41:34
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

Scroll(this.scroller)的高度设百分比,和上面的相加为100%即可,参考DEMO:

@Entry
@Component
struct newPage {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

  @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 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column() {
            Row() {
              Text('首页').align(Alignment.Center)
            }
            .justifyContent(FlexAlign.Center)
            .height('10%') //上面的设10%
            .width('100%')
            .padding({ left: 10, right: 10 })
            .backgroundColor(Color.Green)

            Scroll(this.scroller) {
              Column() {
                ForEach(this.arr, (item: number) => {
                  Text(item.toString())
                    .width('90%')
                    .height(150)
                    .backgroundColor(0xFFFFFF)
                    .borderRadius(15)
                    .fontSize(16)
                    .textAlign(TextAlign.Center)
                    .margin({ top: 10 })
                }, (item: string) => item)
              }.width('100%')
            }.height('90%')  //Scroll设90%
            .scrollable(ScrollDirection.Vertical) // 滚动方向纵向

            .friction(0.6)
            .edgeEffect(EdgeEffect.None)
          }
        }
        .tabBar(this.tabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.tabBuilder(1, 'blue'))

      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('100%')
      .height('100%')

      .backgroundColor('#F1F3F5')
    }.width('100%').height('100%')
  }
}
分享
微博
QQ
微信
回复
2024-12-20 18:34:03
相关问题
HarmonyOS ListItem嵌套Tabs显示不全
217浏览 • 1回复 待解决
HarmonyOS web显示不全
820浏览 • 1回复 待解决
HarmonyOS Tabs控件fadingEdge问题
916浏览 • 1回复 待解决
HarmonyOS PullToRefresh嵌套的List显示不全
262浏览 • 1回复 待解决
HarmonyOS Slider组件气泡提示显示不全
425浏览 • 1回复 待解决
Scroll组件内显示不全问题
1450浏览 • 1回复 待解决
HarmonyOS Tabs控件切换卡顿
252浏览 • 1回复 待解决
HarmonyOS RelativeContainer子控件显示问题
819浏览 • 1回复 待解决
HarmonyOS RelativeContainer内的控件显示
219浏览 • 1回复 待解决
HarmonyOS Tabs怎么与text同行显示
739浏览 • 1回复 待解决
HarmonyOS tabs位置如何居左显示
284浏览 • 1回复 待解决
HarmonyOS 读取内容不全
158浏览 • 1回复 待解决
HarmonyOS 日志打印不全
844浏览 • 2回复 待解决