鸿蒙开发中的页面包含

Contractor c11=new Contractor("诸葛亮","18090987666");Contractor c12=new Contractor("司马懿","18090987689");Contractor c8=new Contractor("孙尚香","18090987661");Contractor c10=new Contractor("曹操","18090987664"

zhhlk

1076人浏览 · 2024-01-22 21:26:27

zhhlk · 2024-01-22 21:26:27 发布

鸿蒙开发中的页面包含

构建包含布局的界面，保持上下布局不变，中间变化。

1.构建top_layout布局

2.构建buttom_layout.xml底部布局

<?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">
    <DirectionalLayout
        ohos:height="80vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:background_element="#AFEEEE"
        ohos:alignment="center"
        ohos:padding="5vp"
        >
        <Button
            ohos:id="$+id:buttom_btfirst"
            ohos:height="50vp"
            ohos:width="match_parent"
            ohos:text="首页"
            ohos:text_size="20vp"
            ohos:background_element="$graphic:bt_state_shap"
            ohos:weight="1"
            />
        <Button
            ohos:id="$+id:buttom_btphotolist"
            ohos:height="50vp"
            ohos:width="match_parent"
            ohos:text="列表"
            ohos:text_size="20vp"
            ohos:background_element="$graphic:bt_state_shap"
            ohos:margin="5vp"
            ohos:weight="1"
            />
        <Button
            ohos:id="$+id:buttom_btshoucang"
            ohos:height="50vp"
            ohos:width="match_parent"
            ohos:text="收藏"
            ohos:text_size="20vp"
            ohos:background_element="$graphic:bt_state_shap"
            ohos:margin="5vp"
            ohos:weight="1"
            />
        <Button
            ohos:id="$+id:buttom_btabout"
            ohos:height="50vp"
            ohos:width="match_parent"
            ohos:text="关于"
            ohos:text_size="20vp"
            ohos:background_element="$graphic:bt_state_shap"
            ohos:margin="5vp"
            ohos:weight="1"
            />
    </DirectionalLayout>
</DirectionalLayout>

3.修改主布局ability_main.xml，包含头部和底部布局

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <include
        ohos:id="$+id:main_top"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:align_parent_top="true"
        layout="$layout:top_layout">

    </include>
    <DirectionalLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:below="$id:main_top"
        >
        <Text
            ohos:id="$+id:text_helloworld"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:background_element="$graphic:background_ability_main"
            ohos:layout_alignment="horizontal_center"
            ohos:text="用户登录"
            ohos:text_size="40vp"
            ohos:text_alignment="center"
            ohos:top_margin="50vp"
            />
        <TextField
            ohos:id="$+id:main_txtuname"
            ohos:height="50vp"
            ohos:width="match_parent"
            ohos:margin="10vp"
            ohos:text=""
            ohos:top_margin="50vp"
            ohos:text_size="20vp"
            ohos:background_element="$graphic:textfiled_input"
            ohos:hint="请输入账号"
            ohos:padding="10vp"

            />
        <TextField
            ohos:id="$+id:main_txtpasswd"
            ohos:height="50vp"
            ohos:width="match_parent"
            ohos:text_input_type="pattern_password"
            ohos:margin="10vp"
            ohos:text=""
            ohos:text_size="20vp"
            ohos:background_element="$graphic:textfiled_input"
            ohos:hint="请输入密码"
            ohos:top_margin="30vp"
            ohos:padding="10vp"

            />
        <DirectionalLayout
            ohos:height="80vp"
            ohos:width="match_parent"
            ohos:orientation="horizontal"
            ohos:alignment="horizontal_center"
            ohos:top_margin="30vp"
            >
            <Button
                ohos:id="$+id:main_btok"
                ohos:height="50vp"
                ohos:width="120vp"
                ohos:text="确定"
                ohos:text_size="20vp"
                ohos:background_element="$graphic:bt_state_shap"
                />
            <Button
                ohos:id="$+id:main_btreset"
                ohos:height="50vp"
                ohos:width="120vp"
                ohos:text="重置"
                ohos:text_size="20vp"
                ohos:background_element="$graphic:bt_state_shap"
                ohos:left_margin="20vp"
                />

        </DirectionalLayout>

    </DirectionalLayout>

    <include
        ohos:height="match_content"
        ohos:width="match_parent"
        layout="$layout:buttom_layout"
        ohos:align_parent_bottom="true"
        />

</DependentLayout>

4.示例

1.构建联系人应用，所有的界面保持头部和底部一致，联系人的应用包括，登录、列表、收藏和关于。

2.构建联系人的实体类Contractor

package com.example.prjhmday6_2.entity;

import java.io.Serializable;

public class Contractor implements Serializable {
    private Integer cid;
    private String cname;//联系人姓名
    private String tel;//联系人电话号码

    public Contractor() {
    }

    public Contractor(Integer cid, String cname, String tel) {
        this.cid = cid;
        this.cname = cname;
        this.tel = tel;
    }

    public Contractor(String cname, String tel) {
        this.cname = cname;
        this.tel = tel;
    }

    public Integer getCid() {
        return cid;
    }

    public void setCid(Integer cid) {
        this.cid = cid;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }

    public String getTel() {
        return tel;
    }

    public void setTel(String tel) {
        this.tel = tel;
    }
}

3.构建联系人列表的主界面constract_list.xml

4.构建联系人选项的子布局界面constract_item_layout.xml

<?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:orientation="vertical">
    <DirectionalLayout
        ohos:height="140vp"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:padding="15vp"
        ohos:top_margin="10vp"
        ohos:background_element="$graphic:border_style"
        ohos:margin="10vp"
        >
        <Text
            ohos:id="$+id:constract_item_textcname"
            ohos:height="50vp"
            ohos:width="200vp"
            ohos:text="联系人姓名"
            ohos:text_size="36vp"
            />
        <Text
            ohos:id="$+id:constract_item_texttel"
            ohos:height="50vp"
            ohos:width="200vp"
            ohos:text="联系人电话"
            ohos:text_size="24vp"
            ohos:top_margin="10vp"
            />

    </DirectionalLayout>
</DirectionalLayout>

5.构建数据提供者类，用于渲染列表布局

package com.example.prjhmday6_2.slice.privader;

import com.example.prjhmday6_2.ResourceTable;
import com.example.prjhmday6_2.entity.Contractor;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;

import java.util.*;
import com.example.prjhmday6_2.entity.*;
import ohos.agp.components.element.LayerElement;

public class ContractorItemProvider extends BaseItemProvider {
    private List<Contractor> contractorList;
    private AbilitySlice context;

    public ContractorItemProvider(List<Contractor> contractorList, AbilitySlice context) {
        this.contractorList = contractorList;
        this.context = context;
    }

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

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

    @Override
    public long getItemId(int i) {
        return i%contractorList.size();
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        if (component==null){
            component= LayoutScatter.getInstance(context).parse(ResourceTable.Layout_constract_item_layout,null,false);
        }
        //获取子布局上的组件对象
        Text textcname=component.findComponentById(ResourceTable.Id_constract_item_textcname);
        Text texttel=component.findComponentById(ResourceTable.Id_constract_item_texttel);
        //从联系人列表中获取指定位置的联系人对象
        Contractor contractor=contractorList.get(i);

        //将指定位置的联系人对象属性设置给文本标签
        textcname.setText(contractor.getCname());
        texttel.setText(contractor.getTel());

        return component;//返回子布局渲染ListContainer布局对象
    }
}

6.修改ConstractListAbilitySlice类，加载数据

package com.example.prjhmday6_2.slice;

import com.example.prjhmday6_2.ResourceTable;
import com.example.prjhmday6_2.entity.Contractor;
import com.example.prjhmday6_2.privader.ContractorItemProvider;
import com.example.prjhmday6_2.util.BottomLayoutUtil;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.ListContainer;

import java.util.*;
public class ConstractListAbilitySlice extends AbilitySlice {
    private DirectionalLayout bottomlayout;
    private Button btfirst;
    private Button btlist;
    private Button btshoucang;
    private Button btabout;
    private ContractorItemProvider contractorItemProvider;
    private List<Contractor> contractors;
    private ListContainer listContainer;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_constract_list);
        //获取listContainer布局对象
        listContainer=findComponentById(ResourceTable.Id_constract_list_container);

        //创建List集合
        contractors=new ArrayList<>();

        //创建联系人信息
        Contractor c1=new Contractor("张飞","18090987654");
        Contractor c2=new Contractor("马超","18090987655");
        Contractor c3=new Contractor("关羽","18090988954");
        Contractor c4=new Contractor("赵云","18090987657");
        Contractor c5=new Contractor("黄忠","18090987658");
        Contractor c6=new Contractor("许褚","18090987659");
        Contractor c7=new Contractor("张良","18090987660");
        Contractor c8=new Contractor("孙尚香","18090987661");
        Contractor c9=new Contractor("刘备","18090987662");
        Contractor c10=new Contractor("曹操","18090987664");
        Contractor c11=new Contractor("诸葛亮","18090987666");
        Contractor c12=new Contractor("司马懿","18090987689");
        Contractor c13=new Contractor("混子瑶","18090987698");
        Contractor c14=new Contractor("庄周","18090987690");
        Contractor c15=new Contractor("苏烈","18090987609");
        //将联系人信息添加到集合中
        contractors.add(c1);
        contractors.add(c2);
        contractors.add(c3);
        contractors.add(c4);
        contractors.add(c5);
        contractors.add(c6);
        contractors.add(c7);
        contractors.add(c8);
        contractors.add(c9);
        contractors.add(c10);
        contractors.add(c11);
        contractors.add(c12);
        contractors.add(c13);
        contractors.add(c14);
        contractors.add(c15);

        //创建数据提供者对象
        contractorItemProvider=new ContractorItemProvider(contractors,this);

        // 设置数据提供者到列表布局
        listContainer.setItemProvider(contractorItemProvider);

        //bottomlayout= LayoutScatter.getInstance(this).parse(ResourceTable.Layout_buttom_layout,null,true);
        bottomlayout=findComponentById(ResourceTable.Id_bottom_directionlayout);
        //创建BottomLayoutUtil
        BottomLayoutUtil bottomLayoutUtil=new BottomLayoutUtil(bottomlayout,ConstractListAbilitySlice.this);
        //bottomLayoutUtil.initCompoent();
        bottomLayoutUtil.initCompoent();

    }

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

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

7.编写公共的底部组件获取以及事件方法BottomLayoutUtil

package com.example.prjhmday6_2.util;

import com.example.prjhmday6_2.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.window.dialog.ToastDialog;

public class BottomLayoutUtil {
    private Component component;//布局
    private AbilitySlice context;//上下文关系对象
    private Button btfirst;
    private Button btlist;
    private Button btshoucang;
    private Button btabout;

    public BottomLayoutUtil(Component component, AbilitySlice context) {
        this.component = component;
        this.context = context;
    }

    public Component getComponent() {
        return component;
    }

    public void setComponent(Component component) {
        this.component = component;
    }

    public AbilitySlice getContext() {
        return context;
    }

    public void setContext(AbilitySlice context) {
        this.context = context;
    }
    /**
     * 获取底部布局的所有按钮组件对象的方法
     * */
    public void initCompoent(){
        new ToastDialog(context).setText("底部公共初始化....").show();
        btfirst=component.findComponentById(ResourceTable.Id_buttom_btfirst);
        btlist=component.findComponentById(ResourceTable.Id_buttom_btphotolist);
        btshoucang=component.findComponentById(ResourceTable.Id_buttom_btshoucang);
        btabout=component.findComponentById(ResourceTable.Id_buttom_btabout);
        //添加事件方法
        btfirst.setClickedListener(component1 -> {
            new ToastDialog(context).setText("首页登录").show();
            Intent startIntent=new Intent();
            Operation operation=new Intent.OperationBuilder()
                    .withDeviceId("")
                    .withBundleName("com.example.prjhmday6_2")
                    .withAbilityName("com.example.prjhmday6_2.MainAbility")
                    .build();
            startIntent.setOperation(operation);
            context.startAbility(startIntent);
            context.terminate();
        });
        //添加事件方法
        btlist.setClickedListener(component1 -> {
            new ToastDialog(context).setText("列表").show();
            Intent startIntent=new Intent();
            Operation operation=new Intent.OperationBuilder()
                    .withDeviceId("")
                    .withBundleName("com.example.prjhmday6_2")
                    .withAbilityName("com.example.prjhmday6_2.ConstractListAbility")
                    .build();
            startIntent.setOperation(operation);
            context.startAbility(startIntent);
            context.terminate();
        });
        btabout.setClickedListener(component1 -> {
            new ToastDialog(context).setText("关于我们").show();
        });
    }
}

8.修改所有的AbilitySlice类，加入公共底部布局的事件

package com.example.prjhmday6_2.slice;

import com.example.prjhmday6_2.ResourceTable;
import com.example.prjhmday6_2.util.BottomLayoutUtil;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.LayoutScatter;
import ohos.agp.window.dialog.ToastDialog;

public class MainAbilitySlice extends AbilitySlice {
    private DirectionalLayout bottomlayout;//底部布局对象
    private Button btfirst;
    private Button btlist;
    private Button btshoucang;
    private Button btabout;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //获取buttom_layout.xml布局组件
               bottomlayout=findComponentById(ResourceTable.Id_bottom_directionlayout);
        //创建BottomLayoutUtil
        BottomLayoutUtil bottomLayoutUtil=new BottomLayoutUtil(bottomlayout,MainAbilitySlice.this);
        //bottomLayoutUtil.initCompoent();
        bottomLayoutUtil.initCompoent();
    }

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

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

红颜色部分，所有的AbilitySlice类中都要有，否则，无法转向其他页面

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

鸿蒙ArkUI布局与样式进阶（五）——从状态到界面：ArkUI 的响应式编程核心

HarmonyOS开发者社区

鸿蒙领航者集结令!

HarmonyOS开发者社区

鸿蒙App是如何调用C++的？

前言当我们开发鸿蒙应用时，ArkTs是当前界面和业务相关的主流代码。然而，在有些特定场景中，我们还是得请出C++——当涉及到计算密集型任务时，或者有些功能有成熟的C++库。那么，ArkTs是如何调用到C++的代码的呢？新建工程让我们结合实践，来分析一下ArkTs和C++的互通。首先使用DevEco Studio创建一个新工程，记得选模板时选择Native C++。创建完成之后，我们可以看到，