鸿蒙HarMonyOS的UI组件学习六之订单列表

Posted 2021-07-21 笔触狂放

        在所有移动互联端的应用软件中，都少不了列表的展示，例如手机通讯录，QQ好友列表，微信好友列表，朋友圈列表，微博列表，邮箱里的邮件列表，王者荣耀的游戏好友列表等等，那在鸿蒙系统中使用什么组件可以展示列表信息，就是它了ListContainer，想要展示出各种不同样子的列表信息页面，那么需要我们自己搭建子布局框架。

        今天就分享一下鸿蒙开发中使用列表组件，先看效果图吧!

滑动屏幕可以进行上下滚动列表

并设置回弹效果，类似于微信朋友圈的向下拖动进行回弹

松手后会自动回弹。

那么接下来上代码，先看主布局代码:

<?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:orientation="vertical">
    <Text
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="预定记录"
        ohos:text_size="25vp"
        ohos:text_alignment="center"
        ohos:background_element="#FF4141F3"
        ohos:text_color="#fff"
        ohos:padding="5vp"
        />
    <ListContainer
        ohos:background_element="#FFEEECEC"
        ohos:id="$+id:lc_order"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:rebound_effect="true"/>

</DirectionalLayout>

主布局中整个屏幕其实就分为两部分，一个是标题栏，剩下的都是列表的部分，通过ohos:rebound_effect="true"这个属性设置列表回弹功能

接下来创建子布局文件，其实整个列表的展示我们可以理解为是由多个子布局拼在一起形成列表，我们再来仔细研究一下列表中每一项的框架结构

很明显，每一行都是这种结构，左边一张图片，中间显示文字信息，右边一个箭头，所以我们只要把子布局的框架结构设计出来再通过java代码循环创建就可以了，思路上可以这样理解，那么接下来上子布局的代码

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:top_margin="1fp"
    ohos:bottom_margin="1fp"
    ohos:padding="5fp"
    ohos:background_element="#fff"
    ohos:orientation="horizontal">

    <Image
        ohos:id="$+id:image_order"
        ohos:height="70fp"
        ohos:width="70fp"
        ohos:right_margin="10vp"
        ohos:image_src="$media:lanqiu_small"
        ohos:scale_mode="stretch"/>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:orientation="vertical">

        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:orientation="horizontal">
            <Text
                ohos:id="$+id:tv_name"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:weight="1"
                ohos:text_alignment="left"
                ohos:text="11111"
                ohos:text_color="#00f"
                ohos:text_size="25fp"/>
            <Text
                ohos:id="$+id:tv_money"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:weight="1"
                ohos:text_alignment="left"
                ohos:text="2222"
                ohos:text_color="#f00"
                ohos:text_size="22fp"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:orientation="horizontal">
            <Text
                ohos:id="$+id:tv_type"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:weight="1"
                ohos:text_alignment="left"
                ohos:text="11111"
                ohos:text_size="20fp"/>
            <Text
                ohos:id="$+id:tv_time"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:weight="1"
                ohos:text_alignment="left"
                ohos:text="2222"
                ohos:text_size="20fp"/>
        </DirectionalLayout>


    </DirectionalLayout>

    <Image
        ohos:height="20fp"
        ohos:width="20fp"
        ohos:scale_mode="stretch"
        ohos:image_src="$media:ling_right"/>

</DirectionalLayout>

好了，那么我们现在只要考虑一项数据的显示，因为每一项总都包含一个图片，四个文本信息，一个箭头图片，所有我们定义一个实体类，将每一项所需要的数据进行封装在一个实体类对象中，ok，如果可以理解了，那么接下来上实体类封装的代码

package com.example.hm_phone_java.entity;

public class Order {
    private int image;//图片id
    private String name;//项目名称
    private String money;//价格
    private String type;//类型
    private String time;//时间

    public Order() {
    }

    @Override
    public String toString() {
        return "Order{" +
                "image=" + image +
                ", name='" + name + '\\'' +
                ", money='" + money + '\\'' +
                ", type='" + type + '\\'' +
                ", time='" + time + '\\'' +
                '}';
    }

    public Order(int image, String name, String money, String type, String time) {
        this.image = image;
        this.name = name;
        this.money = money;
        this.type = type;
        this.time = time;
    }

    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getMoney() {
        return money;
    }

    public void setMoney(String money) {
        this.money = money;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }
}

接下来我们随机生成100项数据

 private void initDate() {
        for (int i = 0; i < 100; i++) {
            int j=new Random().nextInt(images.length);
            Order order=new Order(images[j],
                    names[j],
                    new Random().nextInt(100)+"元",
                    types[new Random().nextInt(types.length)],
                    getNow());
            orders.add(order);
        }
    }
    private String getNow(){
        Date date=new Date();
        SimpleDateFormat sdf=new SimpleDateFormat("yyyy/MM/dd");
        return sdf.format(date);
    }

提前准备一些使用的数据

 private int[] images = {
            ResourceTable.Media_lanqiu_yue,
            ResourceTable.Media_pingpangqiu_yue,
            ResourceTable.Media_yumaoqiu_yue,
    };
    private String[] names = {
            "篮球",
            "乒乓球",
            "羽毛球",
    };
    private String[] types={"个人预定","团体预定"};
    private List<Order> orders=new ArrayList<>();
    private OrderItemAdapter adapter;

将随机生成的100项数据存储在List集合中，那么接下来就是最重要的代码，创建列表适配器，根据数据的项数自动创建组件对象

package com.example.hm_phone_java.adapter;

import com.example.hm_phone_java.ResourceTable;
import com.example.hm_phone_java.entity.Order;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;

import java.util.List;

public class OrderItemAdapter  extends BaseItemProvider {
    private List<Order> orders;
    private AbilitySlice context;

    public OrderItemAdapter(List<Order> orders, AbilitySlice context) {
        this.orders = orders;
        this.context = context;
    }

    @Override
    public int getCount() {
        return orders.size();
    }

    @Override
    public Object getItem(int i) {
        return orders.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }
    //创建缓存对象，避免重复创建大量组件而造成内存浪费导致运行卡顿
    class Holder{
        Image image;
        Text tv_name;
        Text tv_money;
        Text tv_type;
        Text tv_time;

        public Holder(Component component) {
            image= (Image) component.findComponentById(ResourceTable.Id_image_order);
            tv_money= (Text) component.findComponentById(ResourceTable.Id_tv_money);
            tv_name= (Text) component.findComponentById(ResourceTable.Id_tv_name);
            tv_time= (Text) component.findComponentById(ResourceTable.Id_tv_time);
            tv_type= (Text) component.findComponentById(ResourceTable.Id_tv_type);
        }
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        Component pc;
        Holder holder;
        if (component==null){
            pc=LayoutScatter.getInstance(context).parse(ResourceTable.Layout_ability_order_item,null,false);
            holder=new Holder(pc);
            pc.setTag(holder);
        }else {
            pc=component;
            holder= (Holder) pc.getTag();
        }
        holder.tv_type.setText(orders.get(i).getType());
        holder.tv_time.setText(orders.get(i).getTime());
        holder.tv_name.setText(orders.get(i).getName());
        holder.tv_money.setText(orders.get(i).getMoney());
        holder.image.setPixelMap(orders.get(i).getImage());
        return pc;
    }
}

将该适配器对象加载至列表组件上

@Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        this.setUIContent(ResourceTable.Layout_ability_order_list);
        ListContainer lc= (ListContainer) this.findComponentById(ResourceTable.Id_lc_order);
        initDate();
        adapter=new OrderItemAdapter(orders,this);
        lc.setItemProvider(adapter);
    }

文章分享到这里，所用到的图片如下，有需要的朋友可以使用:

感谢大家的关注和阅读，一起探讨技术，谢谢!!!

下一篇 【鸿蒙】HarMonyOS的UI组件学习七之图片轮播