HarmonyOS Tabs 控件 底部显示不全

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

HarmonyOS
2天前
浏览
收藏 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
微信
回复
2天前
相关问题
HarmonyOS web显示不全
555浏览 • 1回复 待解决
HarmonyOS Tabs控件fadingEdge问题
407浏览 • 1回复 待解决
Scroll组件内显示不全问题
1187浏览 • 1回复 待解决
HarmonyOS Tabs控件切换卡顿
27浏览 • 1回复 待解决
HarmonyOS RelativeContainer子控件显示问题
368浏览 • 1回复 待解决
HarmonyOS Tabs怎么与text同行显示
307浏览 • 1回复 待解决
HarmonyOS 日志打印不全
345浏览 • 2回复 待解决
Tabs如何才能居左显示
1004浏览 • 1回复 待解决
HarmonyOS List展示不全的问题
365浏览 • 1回复 待解决
HarmonyOS 直播格式不全待补齐
11浏览 • 1回复 待解决