HarmonyOS 鸿蒙Next List 嵌套list中的布局

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next List 嵌套list中的布局

List 嵌套list 布局中,如何让子list 和 父list 共同滑动,同时子list 可以上拉加载更多

2 回复

写了个demo,子list 和 父list 可以共同滑动,不知道您的场景是什么样子的场景,您可以提供下代码,我们帮您看下:

[@Entry](/user/Entry)
[@Component](/user/Component)
struct ListExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Column(){
              Text('' + item)
                .width('100%').height(100).fontSize(16)
                .backgroundColor(Color.Red)
                .textAlign(TextAlign.Center).borderRadius(10)
              List({ space: 20, initialIndex: 0 }) {
                ForEach(this.arr, (item: number) => {
                  ListItem() {
                    Text('' + item)
                      .width('100%').height(100).fontSize(16)
                      .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
                  }
                }, (item: string) => item)
              }
              .margin({top:20})
            }
          }
        }, (item: string) => item)
      }
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

另外根据所知道的知识点,嵌套相关的的可以给子组件设置nestedScroll(value: NestedScrollOptions) 

文档链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#nestedscroll10

您可以尝试给子List添加:

                 .nestedScroll({

                  scrollForward: NestedScrollMode.PARENT_FIRST,

                  scrollBackward: NestedScrollMode.SELF_FIRST

                })

上拉加载请参考: https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-news_homepage-V5#section18669174519718

nestedScroll是目前最优的解决方案了。

根据您的描述,看了下您的app,应该对应的是热门门店- 户型,房源,服务这块布局的样式,需要上拉刷新的是中间的房源,参考这块界面,用PullToRefresh实现了您需要的界面,以下代码请您参考:

import { PullToRefresh } from '[@ohos](/user/ohos)/pulltorefresh'
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State)  refreshText: string = '';
  private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  private dataStrings: string[] = ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录'];
  [@State](/user/State)  data: string[] = this.dataStrings;
  // 需绑定列表或宫格组件
  private scroller: Scroller = new Scroller();
  build() {
    List({ space: 12 }) {
      ListItemGroup() {
        ListItem() {
          this.TopHeader()
        }
      }
      ListItemGroup({ header: this.header }) {
        ListItem() {
          Tabs({}) {
            TabContent() {
              this.ListA()
            }
            TabContent() {
              Column() {
                PullToRefresh({
                  // 必传项,列表组件所绑定的数据
                  data: $data,
                  // 必传项,需绑定传入主体布局内的列表或宫格组件
                  scroller: this.scroller,
                  // 必传项,自定义主体布局,内部有列表或宫格组件
                  customList: () => {
                    // 一个用[@Builder](/user/Builder)修饰过的UI方法
                    this.getListView();
                  },
                  // 可选项,下拉刷新回调
                  onRefresh: () => {
                    return new Promise<string>((resolve, reject) => {
                      // 模拟网络请求操作,请求网络1秒后得到数据,通知组件,变更列表数据
                      setTimeout(() => {
                        resolve('刷新成功');
                        this.data = this.dataNumbers;
                      }, 1000);
                    });
                  },
                  // 可选项,上拉加载更多回调
                  onLoadMore: () => {
                    return new Promise<string>((resolve, reject) => {
                      // 模拟网络请求操作,请求网络1秒后得到数据,通知组件,变更列表数据
                      setTimeout(() => {
                        resolve('');
                        this.data.push("增加的条目" + this.data.length);
                      }, 1000);
                    });
                  },
                  customLoad: null,
                  customRefresh: null,
                })
              }
            }
            TabContent() {
              this.ListA()
            }
          }
          .barHeight(0)
        }
      }
    }
    .scrollBar(BarState.Off)
    .backgroundColor('#efefef')
  }
  [@Builder](/user/Builder)
  private getListView() {
    List({ space: 20, scroller: this.scroller }) {
      ForEach(this.data, (item: string) => {
        ListItem() {
          Text(item)
            .width('100%')
            .height(150)
            .fontSize(20)
            .textAlign(TextAlign.Center)
            .backgroundColor('#95efd2')
        }
      })
    }
    .backgroundColor('#eeeeee')
    .divider({ strokeWidth: 1, color: 0x222222 })
    .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })
  }
  [@Builder](/user/Builder)
  ListA() {
    List({ space: 20, initialIndex: 0 }) {
      ForEach(this.dataNumbers, (item: number) => {
        ListItem() {
          Text('' + item)
            .width('100%')
            .height(100)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(0xFFFFFF)
        }
      }, (item: string) => item)
    }
    .edgeEffect(EdgeEffect.None)
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })
  }
  [@Builder](/user/Builder)
  TopHeader() {
    Text('主标题和图片').width('100%').height(400)
  }
  [@Builder](/user/Builder)
  header() {
    Text('副标题').width('100%').height(60)
  }
}

PullToRefresh 组件需要在DevEcoStudio的终端输入:ohpm install [@ohos](/user/ohos)/pulltorefresh,下载一下。

在HarmonyOS鸿蒙系统中,Next List 嵌套list的布局实现通常涉及使用ArkUI框架中的组件和布局容器。嵌套list意味着在一个列表项(如RecyclerView或ListContainer)中再嵌套一个或多个列表项。这种布局常用于展示具有层级关系的数据结构,如菜单、分类列表等。

要实现嵌套list的布局,你需要:

  1. 定义数据结构:确保你的数据源能够支持嵌套结构,通常是一个包含子列表的列表。

  2. 使用循环和条件渲染:在ArkUI的JS或ETS语言中,使用for循环和条件语句(如if)来动态生成嵌套的列表项。

  3. 布局容器:选择适当的布局容器,如DirectionalLayoutStackLayoutFlexLayout,来组织你的嵌套列表项。这些容器允许你控制子组件的排列方式和对齐方式。

  4. 事件处理:为嵌套列表项添加点击或滑动事件监听器,以处理用户交互。

  5. 样式和动画:根据需要为列表项添加样式和动画效果,以提升用户体验。

确保你的嵌套列表在数据更新时能够正确刷新,避免内存泄漏和性能问题。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html 里面的免费鸿蒙课程也可以学学。

回到顶部