鸿蒙开发中的页面包含

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

1.构建top_layout布局

<?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="#00FFFF"
        >
        <Text ohos:height="80vp"
            ohos:width="match_content"
              ohos:text="返回"
              ohos:text_size="40vp"

            />
        <Text
            ohos:height="80vp"
            ohos:width="match_parent"
            ohos:text="我的日志"
            ohos:text_size="40vp"
            ohos:background_element="#0000FF"
            ohos:text_alignment="center"
            ohos:text_color="#FFFFFF"

            />

    </DirectionalLayout>
</DirectionalLayout>

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

<?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>
    <ListContainer
        ohos:id="$+id:constract_list_container"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:below="$id:main_top"
        ohos:top_margin="30vp"
        >
    </ListContainer>
    <include
        ohos:height="match_content"
        ohos:width="match_parent"
        layout="$layout:buttom_layout"
        ohos:align_parent_bottom="true"
        />

</DependentLayout>

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 # 华为
Logo
HarmonyOS开发者社区

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

更多推荐

HarmonyOS NEXT应用测试都有哪些工具可以使用，它们的使用场景有哪些区别？

主要介绍基础功能和兼容性、稳定性、功耗、性能、安全和UX这6大核心质量维度在开发阶段和测试阶段需要关注的体验建议。应用在开发过程中典型的测试活动模型和测试活动质量目标，一般分为单元测试，集成测试、UI测试、体验测试和用户测试。致力于提供便捷的一站式应用测试服务，解决应用开发、测试过程中面临的成本、技术和效率问题。目前HarmonyOS NEXT应用测试都有哪些工具，这些工具的使用场景是什么呢？主要

avatar HarmonyOS开发者社区

onTouch事件在点击的时候一直会触发TouchType的Move状态？

真机的触摸传感器通常具有高灵敏度，即使手指轻微抖动（用户可能感知不到），传感器仍会捕捉到坐标变化并触发Move事件。这在需要高精度触控的场景（如绘图应用）中是有益的，但在点击场景下可能造成多次Move事件触发。在按下去的瞬间，Down状态被触发后Move状态也接着被触发，即使手指不移动也会一直触发Move状态，Move连续打印出来的x、y值一模一样。在模拟器上，TouchType的表现正常，不移动

avatar HarmonyOS开发者社区

HarmonyOS应用未上架 ，如何调试检测应用更新功能是否正常？

应用开发中可以正常编写调用checkAppUpdate这个API的业务逻辑，上架后，如果无可更新版本（首次上架或当前已是最新版本）返回0（不存在可更新版本）；返回1（存在新版本）可以通过调用showUpdateDialog这个API显示升级弹框，提醒用户升级到最新版本体验新上架功能特性。当应用启动完成或用户在应用中主动检查应用新版本时，开发者可以通过本服务，来查询应用是否有可更新的版本。开发者可以

avatar HarmonyOS开发者社区