HarmonyOS ListContainer 图文并排

1.两个工具类：DateUtils  + HttpHelper

2.两个依赖包：okhttp3  +  gson

3.装载图片类：Picasso，本地+调试模式，都不能访问本地的网络，运行需要注释装载图片，因为是华为虚拟机

  解决方式：内网穿透技术  ，比如：Ngrok  ，教程：2021最新HarmonyOS鸿蒙2.0系统应用开发|基础入门教程到实战—更新中…_哔哩哔哩_bilibili

implementation 'com.squareup.okhttp3:okhttp:3.10.0'
compile 'com.google.code.gson:gson:2.6.2'
implementation 'io.openharmony.tpc.thirdlib:picasso:1.0.4'

package com.example.demo1.utils;

import java.text.SimpleDateFormat;
import java.util.Date;

public class DateUtils {
    public static String format(long l) {
        Date date = new Date(l);
        String format = new SimpleDateFormat("yyyy-MM-dd").format(date);

        return format;
    }
}

package com.example.demo1.utils;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.OkHttpClient;
import okhttp3.Request;

public class HttpHelper {
    public static HttpHelper instance;
    OkHttpClient okHttpClient;

    public HttpHelper() {
        okHttpClient = new OkHttpClient().newBuilder().build();
    }

    public static HttpHelper getInstance() {
        if (instance == null) {
            synchronized (HttpHelper.class) {
                if (instance == null) {
                    instance = new HttpHelper();
                }
            }
        }

        return instance;
    }

    public void doGet(String url, Callback callback) {
        Request request = new Request.Builder().url(url).build();
        Call call = okHttpClient.newCall(request);

        call.enqueue(callback);
    }

}

package com.example.demo1.data;

import com.example.demo1.ResourceTable;
import com.example.demo1.utils.DateUtils;
import com.squareup.picasso.Picasso;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;

import ohos.global.resource.Resource;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

import java.util.List;

public class MovieProvider extends BaseItemProvider {
    public final HiLogLabel hiLogLabel = new HiLogLabel(HiLog.LOG_APP, 0x00201, "MovieProvider");
    List<Movie> list;
    AbilitySlice slice;

    public MovieProvider(List<Movie> list, AbilitySlice slice) {
        this.list = list;
        this.slice = slice;
    }

    @Override
    public int getCount() {
        return list != null ? list.size() : 0;
    }

    @Override
    public Object getItem(int i) {
        if (list != null && i >= 0 && i < list.size()) {
            return list.get(i);
        }
        return null;
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        final Component cpt;
        HiLog.debug(hiLogLabel, "getComponent" + i);
        if (component == null) {
            cpt = LayoutScatter.getInstance(slice)
                    .parse(ResourceTable.Layout_MovieListItem, null, false);
        } else {
            cpt = component;
        }

        Text publishTime = (Text) cpt.findComponentById(ResourceTable.Id_text_publishTime);
        Text shortTitle = (Text) cpt.findComponentById(ResourceTable.Id_text_shortTitle);
        Text vt = (Text) cpt.findComponentById(ResourceTable.Id_text_vt);
        Image vpic = (Image) cpt.findComponentById(ResourceTable.Id_vpic);


        publishTime.setText(DateUtils.format(list.get(i).getPublishTime()));
        shortTitle.setText(list.get(i).getShortTitle());
        vt.setText(list.get(i).getVt());

        //加载图片-------------
//        Picasso.get().load(list.get(i).getVpic())
//                .placeholder(ResourceTable.Media_icon)
//                .resize(100, 100)
//                .into(vpic);

        return cpt;
    }
}

package com.example.demo1.slice;

import com.example.demo1.ResourceTable;
import com.example.demo1.data.Movie;
import com.example.demo1.data.MovieProvider;
import com.example.demo1.utils.HttpHelper;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ListContainer;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.media.photokit.metadata.AVStorage;
import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.Response;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class MovieListContainerSlice extends AbilitySlice {
    public final HiLogLabel hiLogLabel = new HiLogLabel(HiLog.LOG_APP, 0x00201, "MovieListContainerSlice");

    String url = "http://127.0.0.1:5002/videos";

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_MovieListContainer);

        initView();//查询数据
    }

    private void initView() {
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_movieListContainer);

        HttpHelper.getInstance().doGet(url, new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                HiLog.debug(hiLogLabel, "onFailure");
                HiLog.debug(hiLogLabel, new Gson().toJson(e));
            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {
                String str = response.body().string();
                List<Movie> list = new Gson().fromJson(str, new TypeToken<List<Movie>>() {
                }.getType());
                HiLog.debug(hiLogLabel, "onResponse：size：" + list.size());


                MovieProvider movieProvider = new MovieProvider(list, MovieListContainerSlice.this);
                //更新ui
                getUITaskDispatcher().asyncDispatch(new Runnable() {
                    @Override
                    public void run() {
                        listContainer.setItemProvider(movieProvider);
                        movieProvider.notifyDataChanged();
                    }
                });
            }
        });
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <ListContainer
        ohos:id="$+id:movieListContainer"
        ohos:height="match_parent"
        ohos:width="match_parent">
    </ListContainer>

</DirectionalLayout>

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:left_padding="20vp"
    ohos:orientation="vertical"
    ohos:top_padding="20vp">

    <Image
        ohos:id="$+id:vpic"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:image_src="$media:icon"></Image>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:alignment="center"
        ohos:orientation="horizontal"
        ohos:top_margin="20vp">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="电影标题："
            ohos:text_size="15vp"
            />

        <Text
            ohos:id="$+id:text_shortTitle"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:hint="海贼王"
            ohos:hint_color="red"
            ohos:left_margin="10vp"
            ohos:text_size="15vp"
            />
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:alignment="center"
        ohos:orientation="horizontal"
        ohos:top_margin="20vp">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="发布时间："
            ohos:text_size="15vp"
            />

        <Text
            ohos:id="$+id:text_publishTime"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:hint="11-25"
            ohos:hint_color="red"
            ohos:left_margin="10vp"
            ohos:text_size="15vp"
            />
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:alignment="center"
        ohos:orientation="horizontal"
        ohos:top_margin="20vp">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="发布简介："
            ohos:text_size="15vp"
            />

        <Text
            ohos:id="$+id:text_vt"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:hint="阴谋暴力！海贼管家克洛船长"
            ohos:hint_color="red"
            ohos:left_margin="10vp"
            ohos:text_size="15vp"
            />
    </DirectionalLayout>

    <Component
        ohos:height="1vp"
        ohos:width="match_parent"
        ohos:background_element="gray"></Component>
</DirectionalLayout>