HarmonyOS开发详解（五）——鸿蒙高级组件数据动态绑定案例实践_鸿蒙 findcomponentbyid(1)

本文链接：https://blog.csdn.net/2401_84851494/article/details/138644255

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

private List getData(){
List list=new ArrayList<>();
for(int i=0;i<20;i++){
ItemBean itembean=new ItemBean(“item”+i,“address”+i);
list.add(itembean);
}
return list;
}
//第六步，定义点击事件
listCon.setItemClickedListener((container, component, position, id)->{
ItemBean itemBean=(ItemBean)container.getItemProvider().getItem(position);
new ToastDialog(this)
.setText(“你点击了”+itemBean.getName()+“__”+itemBean.getAddress())
.setAlignment(LayoutAlignment.HORIZONTAL_CENTER).show();
});

以上代码实现效果：

2、PageSlider（页面切换组件）

PageSlider可以通过滚动实现页面间内容切换，每个页面样式内容当然不确定；实现思路和ListContainer一模一样，这里就直接贴出核心代码。

为了练习，里面添加通过代码创建Text（内容）、image、Text（通过事件获取页码）；

//第一步创建PageSlider

//第二步创建页面的子布局

<Image
ohos:id=“$+id:imageComponent”
ohos:height=“200vp”
ohos:width=“match_parent”

//第三步，布局数据内容的实体类
public class ItemPageSlider {
private String title;
private String imageUrl;
private String pageNum;

public ItemPageSlider(String title, String imageUrl, String pageNum) {
this.title = title;
this.imageUrl = imageUrl;
this.pageNum = pageNum;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getPageNum() {
return pageNum;
}
public void setPageNum(String pageNum) {
this.pageNum = pageNum;
}
public String getImageUrl() {
return imageUrl;
}
public void setImageUrl(String imageUrl) {
this.imageUrl = imageUrl;
}
}

//第四步，构建数据提供者
public class ItemPageSliderProvider extends PageSliderProvider {
private List list;
private Context context;
public ItemPageSliderProvider(List list, Context context) {
this.list = list;
this.context = context;
}
@Override
public int getCount() {
return list.size();
}
//组装也面内容
@Override
public Object createPageInContainer(ComponentContainer componentContainer, int i) {
Component component = LayoutScatter.getInstance(this.context).parse(ResourceTable.Layout_page_slider_item, null, false);
Text title = component.findComponentById(ResourceTable.Id_item_title);
title.setText(list.get(i).getTitle());
Text pageNum = component.findComponentById(ResourceTable.Id_item_page_num);
pageNum.setText(list.get(i).getPageNum());
Image image = component.findComponentById(ResourceTable.Id_imageComponent);
image.setPixelMap(CommonUtils.getPixelMapFromPath(context, list.get(i).getImageUrl()));
componentContainer.addComponent(component);
return component;
}
//注意必须要实现销毁类，不然内容不断添加，并不会移除
@Override
public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
componentContainer.removeComponent((Component)o);

}
@Override
public boolean isPageMatchToObject(Component component, Object o) {
return false;
}
}

//第五步，构建数据提供者
private void initPageSlider() {
PageSlider pageSlider = findComponentById(ResourceTable.Id_page_slider);
ItemPageSliderProvider itemPageSliderProvider=new ItemPageSliderProvider(getData(),this);
pageSlider.setProvider(itemPageSliderProvider);
//监听页面变化
pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {
@Override
public void onPageSliding(int i, float v, int i1) {
//…
}

@Override
public void onPageSlideStateChanged(int i) {
//…
}

@Override
public void onPageChosen(int i) {
new ToastDialog(getContext()).setText(“当前页面索引：”+i++).show();
}
});
//添加页面导航，启用前面的xml布局中PageSliderIndicator，配合此段代码即可实现页面导航
PageSliderIndicator indicator = (PageSliderIndicator)findComponentById(ResourceTable.Id_indicator);
ShapeElement normalElement = new ShapeElement();
normalElement.setRgbColor(RgbColor.fromArgbInt(0xADD8E6));
normalElement.setAlpha(168);
normalElement.setShape(ShapeElement.OVAL);
normalElement.setBounds(0, 0, 32, 32);
ShapeElement selectedElement = new ShapeElement();
selectedElement.setRgbColor(RgbColor.fromArgbInt(0x00BFFF));
selectedElement.setAlpha(168);
selectedElement.setShape(ShapeElement.OVAL);
selectedElement.setBounds(0, 0, 48, 48);
indicator.setItemElement(normalElement, selectedElement);
indicator.setItemOffset(60);
indicator.setPageSlider(pageSlider);
}

辅助类，用于读取页面内容（用本地文件json定义）、图片（显示图片资源）

public class CommonUtils {
private static final String TAG = “CommonUtils”;
//读取资源图片
public static PixelMap getPixelMapFromPath(Context context, String path) {
InputStream inputStream = null;
try {
inputStream = context.getResourceManager().getRawFileEntry(path).openRawFile();
ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions();
sourceOptions.formatHint = “image/jpg”;
ImageSource imageSource = ImageSource.create(inputStream, sourceOptions);
ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
decodingOptions.desiredSize = new Size(0, 0);
decodingOptions.desiredRegion = new Rect(0, 0, 0, 0);
decodingOptions.desiredPixelFormat = PixelFormat.ARGB_8888;
return imageSource.createPixelmap(decodingOptions);
} catch (IOException e) {
LogUtil.error(TAG, e.getMessage());
} finally {
try {
if (inputStream != null) {
inputStream.close();
}
} catch (IOException ex) {
LogUtil.error(TAG, ex.getMessage());
}
}
return null;
}

//读取资源文件json内容
public static String getStringFromPath(Context context, String path) {
try {
Resource dataResource = context.getResourceManager().getRawFileEntry(path).openRawFile();
byte[] buffers = new byte[dataResource.available()];
if (dataResource.read(buffers) != -1) {
return new String(buffers, StandardCharsets.UTF_8);
}
} catch (IOException ex) {
LogUtil.error(TAG, ex.getMessage());
}
return Optional.of(path).toString();
}

}

[
{
“title”: “向日葵”,
“imageUrl”: “entry/resources/base/media/xiangrikui.jpg”,
“pageNum”: “1”
},
{
“title”: “海滩”,
“imageUrl”: “entry/resources/base/media/haitan.jpg”,
“pageNum”: “2”
},
{
“title”: “萧山城市”,
“imageUrl”: “entry/resources/base/media/xiaoshan.jpg”,
“pageNum”: “3”