江苏龙网

  1. 主页 > 生活百科 > >

HarmonyOS App开发之组件布局类

HarmonyOS

今天继续分享有关 HarmonyOS 系统的开发组件布局类的知识 ， 我们将在此系统上进行 App 应用开发 ， 主要内容是讲常用的组件布局类有哪些以及它们的使用方式 。
分享的逻辑是先学习布局的含义 ， 再讲解应用框架及示例代码的调用逻辑 ， 最后讲解运行效果图 ， 大致是按照这种三步曲的节奏来分享 。
第一步：常用组件布局的含义

  1. TableLayout 意为表格布局 ， 也可以称为网格布局 ， 允许我们使用表格的方式来排列组件 ， 也就是行和列的方式 。
     
  2. StackLayout 意为堆叠布局 ， 用于在屏幕上保留一个区域来显示组件 ， 实现特殊的功能 。通常 ， 堆叠布局中只应该放置一个子组件 ， 如果存在多个子组件 ， 则显示最新的子组件 。
     
  3. DirectionalLayout（单一方向排列布局）是 JAVA UI 的一种重要的组件布局 ， 用于将一组组件按照水平或垂直方向排布 ， 能够方便地对齐布局内的组件 。【ohos:orientation="vertical" 默认为垂直方向 ， 可以换成ohos:orientation="horizontal"水平方向】
     
  4. DependentLayout 意为相对位置布局 ， 与 DirectionalLayout 相比较有更多的排布方式 ， 每个组件可以指定相对于其他同级组件的位置 ， 也可以指定相对于父组件的位置 。可以使用 DependentLayout 布局来实现更加复杂的UI界面 ， 同时也可以和其他布局相结合组合出需要的UI界面 。
 
第二步：系统框架及代码调用逻辑
【HarmonyOS App开发之组件布局类】系统框架在里面只用图片展示一下 ， 不做详细说明 ， 前期分享的文章：HarmonyOS (鸿蒙操作系统)你值得拥有 有详细说明过 ， 如下：
HarmonyOS App开发之组件布局类

文章插图
 
MainAbility 就是程序的main入口类 ， 这里会调用到 setMainRoute 的方法 ， 传入的是MainAbilitySlice 这个类名称 。此类的核心代码为：
1@Override 2public void onStart(Intent intent) { 3super.onStart(intent); 4super.setUIContent(ResourceTable.Layout_ability_main); // 这里实际上是要去加载ability_main.xml 布局文件 ， 这里在前面加上一个Layout_ 是系统要求这样做的 ， 表明这是一个布局文件 ， 布局文件详情在下面有详细列出 。5Button btn_directional = (Button) findComponentById(ResourceTable.Id_directional_layout); // 这里实际上是在从ability_main.xml 文件中找id 为 directional_layout的元素 ， 并强转为Button类型 6if(btn_directional != null){ // 判断非null7btn_directional.setClickedListener(new Component.ClickedListener() { //给此id 元素设置监听事件 8@Override 9public void onClick(Component component) {10present(new DirectionalLayoutSlice(),new Intent()); // 当此id元素被点击时 ， 就去渲染DirectionalLayoutSlice这个类对象 ， 这里的Present（）是用来实现不同的page(ability)内的跳转 。11}12});13}1415Button btn_dependent = (Button) findComponentById(ResourceTable.Id_dependent_layout);16if(btn_dependent!=null){17btn_dependent.setClickedListener(new Component.ClickedListener() {18@Override19public void onClick(Component component) {20present(new DependentLayoutSlice(),new Intent());21}22});23}2425Button btn_stack = (Button) findComponentById(ResourceTable.Id_stack_layout);26if(btn_stack != null){27btn_stack.setClickedListener(new Component.ClickedListener() {28@Override29public void onClick(Component component) {30present(new StackLayoutSlice(),new Intent());31}32});33}34Button btn_table = (Button) findComponentById(ResourceTable.Id_table_layout);35if(btn_table != null){36btn_table.setClickedListener(new Component.ClickedListener() {37@Override38public void onClick(Component component) {39present(new TableLayoutSlice(),new Intent());40}41});42}43}ability_main.xml 详细内容如下：
1<?xml version="1.0" encoding="utf-8"?> 2<ScrollView //滚动视图组件 3xmlns:ohos="http://schemas.huawei.com/res/ohos" 4ohos:width="match_parent" 5ohos:height="match_parent" 6ohos:rebound_effect="true" 7ohos:layout_alignment="horizontal_center"> //表示是水平居中 8<DirectionalLayout 9ohos:width="match_parent"10ohos:height="match_content"11ohos:orientation="vertical">12<Text13ohos:width="match_content"14ohos:height="match_content"15ohos:text="Common layout"16ohos:text_color="#708090"17ohos:top_margin="15vp"18ohos:left_margin="10vp"19ohos:text_size="25fp"/>20<Text21ohos:background_element="#70dbdb"22ohos:width="match_parent"23ohos:height="3"/>24<TableLayout25ohos:width="1080"26ohos:height="match_content"27ohos:orientation="horizontal"28ohos:top_margin="10"29ohos:column_count="2">30<Button31ohos:id="$+id:directional_layout"32ohos:width="500"33ohos:height="120"34ohos:margin="5"35ohos:padding="2"36ohos:text="DirectionalLayout"37ohos:text_size="17fp"/>38<Button39ohos:id="$+id:dependent_layout"40ohos:width="500"41ohos:height="120"42ohos:margin="5"43ohos:padding="2"44ohos:text="DependentLayout"45ohos:text_size="17fp"/>46<Button47ohos:id="$+id:stack_layout"48ohos:width="500"49ohos:height="120"50ohos:margin="5"51ohos:padding="2"52ohos:text="StackLayout"53ohos:text_size="17fp"/>54<Button55ohos:id="$+id:table_layout"56ohos:width="500"57ohos:height="120"58ohos:margin="5"59ohos:padding="2"60ohos:text="TableLayout"61ohos:text_size="17fp"/>62</TableLayout>63</DirectionalLayout>64</ScrollView>


推荐阅读


上一篇：单线程和多线程 如何编写Python漏洞验证脚本

下一篇：腾讯|腾讯Q币充值大面积取消97折优惠 网友：氪金的欲望没了