鴻蒙OS前端開發入門指南——ListContainer教程

時間  2021-04-29
標籤 java git 數組 緩存 app ide 工具 佈局 post 測試 欄目 Java 简体版
原文   原文鏈接

目錄：java

一、佈局模板git

二、建立數據提供者實體類而且繼承 RecycleItemProvider 實現其方法數組

三、RecycleItemProvider是提供數據與組件關聯器來的方法緩存

四、建立數據實體類app

五、建立數據模板ide

六、獲取listContainer 而且綁定數據模板工具

當前教程項目地址 https://gitee.com/blueskyliu/hongmeng-os-actual-combat.git佈局

建議看着代碼看我這個解釋post

提供在屏幕上向上或向下滾動時顯示的列表容器。這個類繼承自ComponentContainer。它使用BaseItemProvider或RecycleItemProvider來存儲對象測試

根據上面的定義咱們得知 ListContainer 是列表容器，用來渲染重複性佈局的容器

渲染條件

  1. 佈局模板

官方推薦使用xml來寫佈局這裏咱們也用的是xml寫模板佈局

 

<?xml version="1.0" encoding="utf-8" ?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:dynamicitem"
    ohos:height="match_content"
    ohos:width="match_parent"
    >
    <!--        第一層-->
    <DirectionalLayout
            ohos:width="match_parent"
            ohos:height="match_content"
            ohos:orientation="horizontal"
        >
        <DirectionalLayout
            ohos:width="match_parent"
            ohos:height="match_content"
            ohos:orientation="horizontal"
            >
            <Image
                ohos:height="40vp"
                ohos:width="40vp"
                ohos:image_src="$media:log.png"
                ohos:scale_mode="stretch"
                ></Image>
          <DirectionalLayout
              ohos:width="match_parent"
              ohos:height="match_content"
              >
              <Text
                  ohos:text_size="19fp"
                  ohos:width="match_content"
                  ohos:height="match_content"
                  ohos:text_color="#FFFFFF"
                  ohos:text="藍天的測試"
                  ohos:id="$+id:authname"
                  ohos:scale_mode="stretch"
                  ></Text>
              <DirectionalLayout
                  ohos:orientation="horizontal"
                  ohos:width="match_content"
                  ohos:height="match_content"
                  >
                  <Image
                      ohos:height="10vp"
                      ohos:width="10vp"
                      ohos:image_src="$media:log.png"
                      ohos:scale_mode="stretch"
                      ></Image>
                  <Text
                      ohos:text_size="19fp"
                      ohos:width="match_content"
                      ohos:height="match_content"
                      ohos:text_color="#FFFFFF"
                      ohos:text="鄭州市金水區"
                      ></Text>
              </DirectionalLayout>
          </DirectionalLayout>
        </DirectionalLayout>
    </DirectionalLayout>
</DirectionalLayout>

2. 建立數據提供者實體類而且繼承 RecycleItemProvider 實現其方法

提供一個RecycleItemProvider對象，以將ComponentProvider項與組件的基本數據關聯起來。回收器適配器擴展了BaseItemProvider。數據集中的每一個組件項均可以使用它來釋放內存資源。

3. 根據上面的定義咱們得知 RecycleItemProvider是提供數據與組件關聯器來的方法

 

package com.example.myapplication2048.itemprovider;

import com.example.myapplication2048.ResourceTable;
import com.example.myapplication2048.datamodel.DynamicItemInfo;
import ohos.agp.components.*;
import ohos.app.AbilityContext;
import ohos.app.Context;

import java.util.List;

public class DynamicProvider extends RecycleItemProvider {
    /**
     * 卡片盒子模型
     */
    private List<DynamicItemInfo> dynamicModels;
    /**
     * 應用程序能夠使用AbilityContext來獲取資源、啓動能力、
     * 建立或獲取線程模型，以及獲取應用程序包信息和運行信息。
     * 一個能力就是ability context的一個實例。
     * 總之只要操做就須要getcontext 由於他須要這個環境 就比如人對水的需求 蓋房子 作飯 都須要水同樣
     */

    public DynamicProvider(List<DynamicItemInfo> dynamicModels) {
        this.dynamicModels = dynamicModels;
    }

    /**
     * ：
     * @return獲取提供程序中數據項的總數
     */
    @Override
    public int getCount() {
        return  dynamicModels.size();
    }
    /**
     * ：
     * @return獲取位於數據集中指定位置的數據項。
     */
    @Override
    public DynamicItemInfo getItem(int i) {
        return dynamicModels.get(i);
    }
    /**
     * ：
     * @return 獲取數據集中指定位置的數據項的行ID。
     */
    @Override
    public long getItemId(int i) {
        return i;
    }

    /**
     * 獲取在數據集中指定位置顯示數據的組件。
     * @param i  指示組件在數據集中的位置。
     * @param component  表示前一個須要重用的組件。若是沒有這樣的組件，這個參數能夠爲空。
     * @param componentContainer  匹配要獲取組件的父組件。
     * @return
     */
    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
      Component parse = component; //默認 component ==null 第一次的時候

        /**
         * LayoutScatter
         * 您能夠使用該工具在XML文件中定義一個組件，
         * 而後調用parse(int, ohos.agp.components.ComponentContainer, boolean)
         * 方法來使用該文件生成一個組件對象。
         * parse 公共組件解析(int xmlId, ComponentContainer根，boolean attachToRoot)
         * 將XML文件轉換爲組件。
         *
         */
        /**
         * parse
         *   參數1 組件id
         *   參數2 跟組件 就是當前容器 父組件。
         */
        Dynamicitem dynamicitem;//初始化
        if (parse==null){
            //獲取上下文 這裏獲取的是父組件 就是 ListContainer 上下文
            Context context = componentContainer.getContext();
            //獲取xml 佈局模板
            parse  = LayoutScatter.getInstance(context)
                    .parse(ResourceTable.Layout_dynamicitem, componentContainer, false);
            //指明給哪一個模板容器添加數據
            dynamicitem = new Dynamicitem(parse);
            parse.setTag(dynamicitem);//將佈局模板寫入緩存  下次調用使用 不用重複查詢模板
        }else {
            //第二次進來有緩存
            dynamicitem =(Dynamicitem) parse.getTag();
        }
        //給佈局模板裏面的組件添加數據
        dynamicitem.textAUTH.setText(dynamicModels.get(i).getAuthor());
        //綁定完成 返回當前模板
        return parse;
    }
    /**
     * 動態卡片容器
     */
    public  static   class Dynamicitem {
        Text textAUTH;//初始化組件
        Dynamicitem(Component itemComponent){
            //獲取模板裏面的 組件
            textAUTH = (Text) itemComponent.findComponentById(ResourceTable.Id_authname);
        }


    }
}

 

4. 建立數據實體類

 

package com.example.myapplication2048.datamodel;

/**
 * 動態數據模型
 */
public class DynamicItemInfo {
    // true 關注  false 沒關注
    private boolean isFocusOn;
    //用戶名
    private String author;
    //用戶頭像
    private String authorImgUrl;
    //建立時間
    private Long create_date;
    // true 點贊  false 沒點贊
    private boolean isPraise;
    //點贊數量
    private Integer praiseNum;
    //評論數量
    private Integer commentsNum;
    //熱度數量
    private Integer hotNum;

    public DynamicItemInfo(boolean isFocusOn, String author, String authorImgUrl, Long create_date, boolean isPraise, Integer praiseNum, Integer commentsNum, Integer hotNum) {
        this.isFocusOn = isFocusOn;
        this.author = author;
        this.authorImgUrl = authorImgUrl;
        this.create_date = create_date;
        this.isPraise = isPraise;
        this.praiseNum = praiseNum;
        this.commentsNum = commentsNum;
        this.hotNum = hotNum;
    }

    @Override
    public String toString() {
        return "dynamicModel{" +
                "isFocusOn=" + isFocusOn +
                ", author='" + author + '\'' +
                ", authorImgUrl='" + authorImgUrl + '\'' +
                ", create_date=" + create_date +
                ", isPraise=" + isPraise +
                ", praiseNum=" + praiseNum +
                ", commentsNum=" + commentsNum +
                ", hotNum=" + hotNum +
                '}';
    }

    public boolean isFocusOn() {
        return isFocusOn;
    }

    public void setFocusOn(boolean focusOn) {
        isFocusOn = focusOn;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getAuthorImgUrl() {
        return authorImgUrl;
    }

    public void setAuthorImgUrl(String authorImgUrl) {
        this.authorImgUrl = authorImgUrl;
    }

    public Long getCreate_date() {
        return create_date;
    }

    public void setCreate_date(Long create_date) {
        this.create_date = create_date;
    }

    public boolean isPraise() {
        return isPraise;
    }

    public void setPraise(boolean praise) {
        isPraise = praise;
    }

    public Integer getPraiseNum() {
        return praiseNum;
    }

    public void setPraiseNum(Integer praiseNum) {
        this.praiseNum = praiseNum;
    }

    public Integer getCommentsNum() {
        return commentsNum;
    }

    public void setCommentsNum(Integer commentsNum) {
        this.commentsNum = commentsNum;
    }

    public Integer getHotNum() {
        return hotNum;
    }

    public void setHotNum(Integer hotNum) {
        this.hotNum = hotNum;
    }
}

5. 建立數據模板

 

package com.example.myapplication2048.datamodel;

import java.util.ArrayList;
import java.util.List;
import java.util.stream.IntStream;

public class DynamicViewModel {
    private List<DynamicItemInfo> dataItemList = new ArrayList<>();

    public DynamicViewModel() {
        IntStream.range(0,2)
                .forEach(index->dataItemList.add(
                        new DynamicItemInfo(false,"藍天","adfa",123123L  ,true,12,12,2)));
    }
    public List<DynamicItemInfo> getDataItemList() {
        return dataItemList;
    }
}

6. 獲取listContainer 而且綁定數據模板

本案例這串代碼須要寫在 MainAbilitySlice 生命週期的 onStart 在子頁面剛加載的時候調用便可

//獲取listContainer
 ListContainer listContainerDynamic =(ListContainer)  findComponentById(ResourceTable.Id_list_container);
      	//實例化數據模板
        DynamicViewModel viewModel = new DynamicViewModel();
        //獲取模板數組
        List<DynamicItemInfo> dataItemList = viewModel.getDataItemList();
  		//模板數組傳入數據提供者實體類
        DynamicProvider dynamicProvider = new DynamicProvider(dataItemList);
        //將數據提供者與listContaienr 綁定
        listContainerDynamic.setItemProvider(dynamicProvider);

做者：BLUESKYHOST

想了解更多內容，請訪問51CTO和華爲合做共建的鴻蒙社區： https://harmonyos.51cto.com

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程