使用 HarmonyOS 探索 ListView 中的 Stic

我们已经看到了一种显示列表视图的传统方式，它以一个无限滚动的方式显示在另一个之下。好吧，这在大多数情况下都有效，但是，有时我们需要显示或分类标题并以不同类型调整列表视图，这时像 StickyHeader 这样的库就派上用场了。

粘性标题还有另一种常见用法，当用户向下滚动页面时，我们将网站或应用程序的标题保持在屏幕上的相同位置。

在使用方面，我们认为下面列出了多种情况。

• 地址簿，显示带有字母和相应联系人的标题。
• 日历任务，以日期作为标题组件，并在其下方显示任务列表。
• 位置列表，如国家作为标题，州列表作为子组件。

以上是我能想到的几个常见用例，如果您发现一些有趣的东西，请发表评论并分享您的想法。

现在我们对stickyheader有了一个很好的了解，每当有一个有用的组件时，我们尝试做的第一件事就是想出一个可重用的组件，即库。因此，在本文中，我们将了解如何在 HarmonyOS 中使用 StickyListHeaders 库。

让我们看看 HarmonyOS Mobile App 中stickyheaderListview 库的使用和所需的设置。

如果您是 HarmonyOS 的新手，请在此处查看有关 HarmonyOS 的文章。

有关stickyheaderListview 库的更多信息可以在这里找到

分步实施

1.DevEco工作室

在这里，我们将使用专门为运行 HarmonyOS 应用程序而设计的 DevEco studio IDE，如果您还没有安装，那么您可以从 SDK 的官方链接中获得它。此外，我们在此处提供了环境设置的分步说明。

1. 项目创建

启动并运行 DevEco Studio 后，您可以创建一个选择“文件”-> 新建 -> 新项目选项，然后您会看到多个模板可供选择，选择如下所示的模板，即 Empty Ability。

下一步，您必须使用项目详细信息、路径并确保选择“配置项目”

• 语言如 Java 和
• API 版本为 5

完成初始设置后，您就可以开始使用该应用程序了。

2. 依赖

接下来添加 StickyListHeaders 依赖项，为了在您的 HarmonyOS 移动应用程序中使用该库，您需要首先通过在 entry/build.gradle 文件中添加以下依赖项来安装它。

implementation 'io.openharmony.tpc.thirdlib:StickyListHeaders:1.0.1'

3. 通过 XML 定义布局

<ListContainer
        ohos:id="$+id:sample_list"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:bottom_margin="10vp"
        ohos:left_margin="10vp"
        ohos:right_margin="10vp"/>

4. 现在我们可以添加 java API 进行自定义，如下所示。

 StickyListHeadersAdapter listItemProvider = new StickyListHeadersAdapter(this, mStickyList, new StickyListHeadersAdapter.OnItemClicklistener() {
            @Override
            public void onItemClick(String selectedItem, boolean isHeader) {
                if (isHeader) {
                    itemType = "Header " + selectedItem;
                } else {
                    itemType = "Item " + selectedItem + " clicked!";
                }
                Util.showTips(getContext(), itemType);
            }
        });

您可以在此处找到更多详细信息。

用例

1. 现在让我们将一些 API 付诸实施并查看结果。首先，一个是 onItemClicked，下面是布局和功能的片段。

<ListContainer
        ohos:id="$+id:sample_list"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:bottom_margin="10vp"
        ohos:left_margin="10vp"
        ohos:right_margin="10vp"/>

StickyListHeadersAdapter listItemProvider = 
   new StickyListHeadersAdapter
(this, mStickyList, new StickyListHeadersAdapter
.OnItemClicklistener() {
    @Override
public void onItemClick(String selectedItem, boolean isHeader){
if (isHeader) {
     itemType = "Header " + selectedItem;
    } else {
     itemType = "Item " + selectedItem + " clicked!";
      //present(new ContactsAppSlice(), new Intent());
     }
     Util.showTips(getContext(), itemType);
            }
        });

这导致以下执行。

2. 下一个用例是粘性标题的自定义背景颜色。

<ListContainer
        ohos:id="$+id:sample_list"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:bottom_margin="10vp"
        ohos:left_margin="10vp"
        ohos:right_margin="10vp"/>

listItemProvider.setResource(ResourceTable.Layout_list_item,
  ResourceTable.Id_item_name);
 listItemProvider.setColor(Color.YELLOW.getValue(), 
 Color.TRANSPARENT.getValue());
 mListContainer.setItemProvider(listItemProvider);
 if (mView.findComponentById(ResourceTable.Id_header_name)
 instanceof Text) {
 mHeaderName = (Text) mView.findComponentById
 (ResourceTable.Id_header_name);
 mHeaderName.setBackground(ViewUtil.customElement
 (Color.BLACK.getValue()));
 mHeaderName.setClickedListener(this);
        }
  mListContainer.setScrolledListener(this);
        super.setUIContent(mView);

好吧，以上产生了红色的stickyheader背景和项目的蓝色阴影之一。

结论

到现在为止，您一定已经了解了如何使用和探索 HarmonyOS 中的 StickyListHeaders 库，以及各种赋予其额外触感并使其独一无二的自定义。请您尝试在下面的评论部分分享您的经验。

可以在此处找到有关 StickyListHeaders 库的更多信息

在此处查看有关 HarmonyOS 的更多文章。

链接：https://infoapplibgroup.hashnode.dev/explore-sticky-header-in-listview-using-harmonyos