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>