HarmonyOS ListItem嵌套Tabs显示不全？

Question

代码如下，结构为List嵌套Tabs，Tabs嵌套List，显示不全，哪里有问题吗

import { PullToRefresh, PullToRefreshConfigurator } from '@ohos/pulltorefresh'

const tabsList = ["能源", "化工", "塑料", "化纤", "聚氨酯"]

@Entry
@Component
struct KeyboadPage {
  private refreshScroller: Scroller = new Scroller();
  private refreshConfigurator: PullToRefreshConfigurator = new PullToRefreshConfigurator();
  @State list: Array<string> =
    ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t"]

  build() {
    Column({ space: 10 }) {
      PullToRefresh({
        // 必传项，列表组件所绑定的数据
        data: $list,
        refreshConfigurator: this.refreshConfigurator,
        // 必传项，需绑定传入主体布局内的列表或宫格组件
        scroller: this.refreshScroller,
        // 必传项，自定义主体布局，内部有列表或宫格组件
        customList: () => {
          // 一个用@Builder修饰过的UI方法
          this.getListView();
        },
        // 可选项，下拉刷新回调
        onRefresh: () => {
          return new Promise<string>((resolve, reject) => {
            // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
            setTimeout(() => {
              resolve('刷新成功');
            }, 2000);
          });
        },
        // 可选项，上拉加载更多回调
        onLoadMore: () => {
          return new Promise<string>((resolve, reject) => {
            // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
            setTimeout(() => {
              resolve('');
            }, 2000);
          });
        },
        customLoad: null,
        customRefresh: null,
      })
        .layoutWeight(1)

    }
  }

  @Builder
  getListView() {
    List({ scroller: this.refreshScroller }) {
      ListItem() {
        Text("第一条")
          .width("100%")
          .height(300)
          .backgroundColor(Color.Red)
      }

      ListItem() {
        Text("第二条")
          .width("100%")
          .height(500)
          .backgroundColor(Color.Yellow)
      }

      ListItem() {
        Text("第三条")
          .width("100%")
          .height(200)
          .backgroundColor(Color.Green)
      }

      ListItem() {
        Tabs({
          barPosition: BarPosition.Start,
        }) {
          ForEach(tabsList,
            (item: string, idx: number) => {
              TabContent() {
                List() {
                  ForEach(this.list,
                    (item: string, idx: number) => {
                      ListItem() {
                        Text(item)
                          .width("100%")
                          .height(50)
                      }
                    })
                }
                .width("100%")
                .scrollBar(BarState.Off)
                .enableScrollInteraction(false)
              }
              .tabBar(this.watchingTabBuilder(idx, item))
            })
        }
        .width("100%")
        .barHeight(50)
        .barMode(BarMode.Scrollable)
        .onChange((index: number) => {
        })
      }
    }
  }

  @Builder
  watchingTabBuilder(index: number, item: string) {
    Text(item)
      .fontSize(16)
      .fontColor("#121212")
      .padding({
        left: 15,
        right: 15,
        top: 12,
        bottom: 12
      })
      .borderRadius(5)
  }
}

Answer 1

步骤一：Tab根据List每个条目的高度和条目个数，计算整体高度，然后设置给Tab的高度，这样可以让内部的所有的List条目均显示出来；

步骤二：Tab里面的List通过nestedScroll方法设置可以嵌套滚动，这样的话，即可用外层的List去滚动

改造后的demo

@State listH: number = 0
onPageShow(): void {
  this.listH = this.list.length * 50 + 50
}

将这里的listH 赋值给里层list的高度

也可使用pulltorefresh一般用于纯粹的单层List场景，提供思路：

1、顶层使用Refresh组件进行上拉刷新

2、内层使用pulltofresh进行下拉加载

参考代码：

import { PullToRefresh, PullToRefreshConfigurator } from '@ohos/pulltorefresh'

const tabsList = ["能源", "化工", "塑料", "化纤", "聚氨酯"]


@Component
struct InnerList {
  private refreshScroller: Scroller = new Scroller();
  private refreshConfigurator: PullToRefreshConfigurator = new PullToRefreshConfigurator();
  @State list: Array<string> =
    ["a", "b", "c", "d", "e", "f", "a1", "b1", "c1", "d1", "e1", "f1"]

  aboutToAppear(): void {
    this.refreshConfigurator.setHasRefresh(false);
  }

  @Builder
  getListView() {
    List({ space: 10, scroller: this.refreshScroller }) {
      ForEach(this.list,
        (item: string, idx: number) => {
          ListItem() {
            Text(item)
              .width("100%")
              .height(200)
              .width('100%')
              .backgroundColor(Color.Pink)
          }
        })
    }
    .height('100%')
    .width("100%")
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.None)
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })
  }

  build() {
    Column({ space: 10 }) {
      PullToRefresh({
        // 必传项，列表组件所绑定的数据
        data: $list,
        refreshConfigurator: this.refreshConfigurator,
        // 必传项，需绑定传入主体布局内的列表或宫格组件
        scroller: this.refreshScroller,
        // 必传项，自定义主体布局，内部有列表或宫格组件
        customList: () => {
          // 一个用@Builder修饰过的UI方法
          this.getListView();
        },
        // 可选项，上拉加载更多回调
        onLoadMore: () => {
          return new Promise<string>((resolve, reject) => {
            // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
            setTimeout(() => {
              resolve('加载更多啦啦啦');
              this.list.push('a2');
              this.list.push('b2');
            }, 2000);
          });
        },
        customLoad: null,
        customRefresh: null,
      }).width('100%').height('100%')
    }.width('100%')
  }
}

@Entry
@Component
struct KeyboadPage {
  private refreshScroller: Scroller = new Scroller();
  @State isRefresh: boolean = false;

  build() {
    Column({ space: 10 }) {
      Refresh({ refreshing: $$this.isRefresh, builder: this.buildRefreshCom() }) {
        this.getListView()
      }.onRefreshing(() => {
        setTimeout(() => {
          this.isRefresh = false;
        }, 1000)
      })
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  buildRefreshCom() {
    Row() {
      LoadingProgress().height(32)
      Text("正在刷新...").fontSize(16).margin({
        left: 20,
      })
    }
    .alignItems(VerticalAlign.Center)
  }

  @Builder
  getListView() {
    List({ scroller: this.refreshScroller }) {
      ListItem() {
        Text("第一条")
          .width("100%")
          .height(300)
          .backgroundColor(Color.Red)
      }

      ListItem() {
        Text("第二条")
          .width("100%")
          .height(500)
          .backgroundColor(Color.Yellow)
      }

      ListItem() {
        Text("第三条")
          .width("100%")
          .height(200)
          .backgroundColor(Color.Green)
      }

      ListItem() {
        Tabs({
          barPosition: BarPosition.Start,
        }) {
          ForEach(tabsList,
            (item: string, idx: number) => {
              TabContent() {
                InnerList()
              }
              .tabBar(this.watchingTabBuilder(idx, item))
            })
        }
        .width("100%")
        .barHeight(50)
        .barMode(BarMode.Scrollable)
        .onChange((index: number) => {
        })
      }
    }
    .edgeEffect(EdgeEffect.None)
    .height('100%')
    .width('100%')
    .scrollBar(BarState.Off)
  }

  @Builder
  watchingTabBuilder(index: number, item: string) {
    Text(item)
      .fontSize(16)
      .fontColor("#121212")
      .padding({
        left: 15,
        right: 15,
        top: 12,
        bottom: 12
      })
      .borderRadius(5)
  }
}