DevEco布局（笔记）

最新推荐文章于 2024-09-08 20:59:45 发布
最新推荐文章于 2024-09-08 20:59:45 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： HarmonyOS（笔记） 文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46949627/article/details/121521467
版权

关于对于组件的放置 

一、线性布局

权重

在线性布局中，是按照百分比来的。每一个组件都有一个权重，将所有权重加起来，计算出每一个组件所占百分比。随后，计算父布局的剩余空间，通过百分比来分配其各个组件所占空间。

  • 当布局顺序为从上至下（垂直布局 ），只有高度按照百分比布局

  • 当布局顺序为从左到右（水平布局），只有宽度按照百分比布局

父布局可用空间=父布局长度或宽度 - 所有固定的长度或宽度

<?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:alignment="center"
    ohos:orientation="vertical">
    
    <Text
        ohos:height="0vp"
        ohos:width="100vp"
        ohos:background_element="#FF0000"
        ohos:weight="1"
        />
    <Text
        ohos:height="0vp"
        ohos:width="100vp"
        ohos:background_element="#00FF00"
        ohos:weight="2"
        />
    <Text
        ohos:height="0vp"
        ohos:width="100vp"
        ohos:background_element="#0000FF"
        ohos:weight="1"
        />
    <Text
        ohos:height="100vp"
        ohos:width="100vp"
        ohos:background_element="#000000"
        />
</DirectionalLayout>

电话按钮的布局实例

ability_main.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:alignment="center"
    ohos:orientation="vertical">
    <Text
        ohos:height="50vp"
        ohos:width="200vp"
        ohos:text_size="20fp"
        ohos:top_margin="30vp"
        ohos:layout_alignment="horizontal_center"
        ohos:background_element="$graphic:text_empty"/>
    <DirectionalLayout
          ohos:height="match_content"
          ohos:width="match_parent"
          ohos:alignment="horizontal_center"
          ohos:orientation="horizontal"
          ohos:top_margin="10vp">
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="1"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="2"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="3"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:alignment="horizontal_center"
            ohos:orientation="horizontal"
            ohos:top_margin="10vp">
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="4"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="5"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="6"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
        </DirectionalLayout>
        <DirectionalLayout
              ohos:height="match_content"
              ohos:width="match_parent"
              ohos:alignment="horizontal_center"
              ohos:orientation="horizontal"
              ohos:top_margin="10vp">
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="7"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="8"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="9"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
        </DirectionalLayout>
        <DirectionalLayout
              ohos:height="match_content"
              ohos:width="match_parent"
              ohos:alignment="horizontal_center"
              ohos:orientation="horizontal"
              ohos:top_margin="10vp">
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="#"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="0"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
          <Button
              ohos:height="70vp"
              ohos:width="70vp"
              ohos:text="*"
              ohos:text_size="35fp"
              ohos:text_color="black"
              ohos:text_alignment="center"
              ohos:background_element="$graphic:button_state"/>
      </DirectionalLayout>
    <Button
        ohos:height="50vp"
        ohos:width="200vp"
        ohos:text="CALL"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="$graphic:text_empty"
        ohos:text_alignment="center"
        ohos:top_margin="50vp"
        ohos:layout_alignment="horizontal_center"
        />
</DirectionalLayout>

 text_empty.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    ohos:shape="rectangle"
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <stroke
        ohos:color="#000000"
        ohos:width="3vp"/>
    <corners
        ohos:radius="15vp"/>
</shape>

button_state.xml

<?xml version="1.0" encoding="utf-8"?>
<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <item ohos:state="component_state_pressed" ohos:element="$graphic:button_press"/>
    <item ohos:state="component_state_empty" ohos:element="$graphic:button_empty"/>
</state-container>

 button_press.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    ohos:shape="oval"
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <stroke
        ohos:color="#000000"
        ohos:width="3vp"/>
    <solid ohos:color="#00FF00"/>
</shape>

 button_empty.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    ohos:shape="oval"
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <stroke
        ohos:color="#000000"
        ohos:width="3vp"/>
</shape>

二、相对布局

  • 基准位置
  • 任意组件是相对其他组件而言

基准位置

一般而言以左上角为基准位置

  • ohos:alignment 用于设置基准位置
  • alignment=“center”：基准位置在正中央
  • alignment=“horizontal_center”：基准位置在最上方的中央
  • alignment="vertical_center":基准位置在最左侧的中央
  • alignment="top"/alignment="left"/不设置:基准位置在左上角
  • alignment="right"：基准位置在右上角
  • alignment="bottom"：基准位置在左下角
  • alignment="bottom|right"：基准位置在右下角
  • 等

放置的话一般用right_of和below，放置在上一个组件的相对位置。

<?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:alignment="top"
    >
    <Text
        ohos:id="$+id:text1"
        ohos:height="100vp"
        ohos:width="100vp"
        ohos:text="text1"
        ohos:text_size="20fp"
        ohos:background_element="#21A8FD"/>
    <Text
        ohos:height="100vp"
        ohos:width="100vp"
        ohos:text="text2"
        ohos:text_size="20fp"
        ohos:background_element="#FF1234"
        ohos:right_of="$id:text1"/>
</DependentLayout>

三、表格布局

  • row_count行数
  • column_count列数
  • orientation摆放顺序
  • alignment_type对齐方式
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:row_count="3"
    ohos:column_count="3"
    >
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="1"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#21A8FD"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="2"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#0000FF"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="3"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#00FF00"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="4"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#FF0000"/>
</TableLayout>

对齐方式

默认方式，ohos:alignment_type="align_contents"

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="horizontal"
    ohos:row_count="3"
    ohos:column_count="3"
    ohos:alignment_type="align_contents"
    >
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="1"
        ohos:text_size="35fp"
        ohos:left_margin="50vp"
        ohos:text_color="#000000"
        ohos:background_element="#21A8FD"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="2"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#0000FF"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="3"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#00FF00"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="4"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#FF0000"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="5"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#0FFFF0"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="6"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#FF0FF0"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="1"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#21A8FD"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="2"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#0000FF"/>
    <Text
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:text="3"
        ohos:text_size="35fp"
        ohos:text_color="#000000"
        ohos:background_element="#00FF00"/>
</TableLayout>

 修改ohos:alignment_type="align_edges"

其他布局

  • 层叠布局
  • 绝对布局 
  • 自适应盒子布局
yjx23332
关注
专栏目录
DevEco Studio项目构建讲解、编写页面、布局介绍
X7gUWZnYP的博客
04-01 1956
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。下图是我进阶学习所积累的历年腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节祝大家都能得到自己心仪工作。自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
鸿蒙4.0开发笔记之DevEco Studio如何使用低代码开发模板进行开发的详细流程（六）
Viewinfinitely的博客
11-25 6122
鸿蒙HarmonyOS低代码开发方式，具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本和提升用户构建UI界面的效率。
DevEco Studio 的组件布局和事件内容（笔记）
weixin_46949627的博客
10-26 2349
本文选择的是Java开发模式，不是Js+Java的开发模式 一、组件、布局、事件 组件：屏幕展示出来的元素，文本、按钮、图片等。 布局：组件摆放方式 事件：可以被组件识别的操作 二、事件 常见的有：单击、双击、长按、滑动等 单击事件 修改ability_main.xml <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/r
安装DevEco Studio编译器+鸿蒙基础入门了解
最新发布
weixin_46489412的博客
09-08 1498
通过interface接口约定 对象结构类型interface 接口名 {属性1: 类型1属性2: 类型2属性3: 类型3定义对象并使用：对象名.属性名// 1. 定义接口// 2. 基于接口，定义对象name: '杨幂',age: 18,weight: 90console.log('名字', ym.name)console.log('年龄', ym.age)name: '刘诗诗',age: 19,weight: 88console.log('名字', lss.name)
【鸿蒙应用开发 Dev ECO Studio 5.0版本】从0到1！从无到有！最全！计算器------按钮动画、滑动退格、中缀表达式转后缀表达式、UI设计
samroom的博客
08-03 2555
鸿蒙应用开发，5.0版本DEV ECO Studio 从无到有实现一个计算器，最全，按钮动画、滑动退格以及基础运算功能
梅科尔工作室-姓名-鸿蒙笔记1
zr217443783的博客
02-17 650
下载完成后，双击下载的“deveco-studio-xxxx.exe”，进入DevEco Studio安装向导，在如下界面选择安装路径，默认安装于“C:\Program Files”下，也可以单击“Browse...”指定其他安装路径，然后单击“Next”。在弹出的SDK下载页面，单击“Next”，并在弹出的License Agreement窗口，阅读License协议，需同意License协议后，单击“Next”开始下载SDK。ability的图标。该标签标识ability图标，标签值为资源文件的索引。
『HarmonyOS』DevEco的下载安装与开发环境搭建
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
07-07 4843
申请成为开发者​ 在进行HarmonyOS应用/服务开发前，开发者需要注册一个华为开发者帐号。可以访问：https://www.harmonyos.com，点击右上角注册，在注册页面，选择手机号或邮箱地址注册：开发者实名认证​ 注册完毕后，需要完成实名认证，实名认证方式分为：“个人开发者实名认证”和“企业开发者实名认证”。具体步骤是：HUAWEI DevEco Studio是基于IntelliJ IDEA Community开源版本打造，面向终端全场景多设备的一站式集成开发环境（IDE），同时支持OpenH
HarmonyOS移动应用学习笔记——2.HarmonyOS开发工具DevEco Studio安装
WMX_0121的博客
03-02 1万+
HarmonyOS开发工具DevEco Studio安装及运行环境配置
【深鸿会—深大—小组学习笔记】从零开始使用华为DevEco Studio编写2048小游戏（完整版）
Brian_Leeee的博客
11-27 1391
从零开始使用华为DevEco Studio编写2048小游戏写在前面概述准备工作开发工具编写位置文件用途具体流程1.实现页面布局2. 在画布上显示所有的格子以及格子里的数字3. 页面初始化时随机选择两个格子，并放入2或4 页面初始化4.响应滑动事件5.判断游戏是否结束“响应滑动事件”与“判断游戏是否结束”驱动代码如下：源代码（详解）写在后面 写在前面 本文是在上一篇（2048未完成版）的基础上完成的，由我和@WiKiBeta共同对代码进行了完整的实现，并对完整的过程和代码都进行了完备的整理和详细的解读，由于
从零开始使用华为DevEco Studio编写2048小游戏
Brian_Leeee的博客
11-19 7000
从零开始使用华为DevEco Studio编写2048小游戏写在前面概述准备工作开发工具编写位置文件用途具体流程源代码（详解）写在后面 写在前面 概述 准备工作 开发工具 华为HarmonyOS的应用开发工具DevEco Studio下载地址 编写位置 文件用途 具体流程 源代码（详解） hml <div class="container"> <text class="scores"> 最高分：{
如何使用HarmonyOS面部识别能力_deveco studio 人脸识别
2401_84166458的博客
04-20 975
/ BiometricAuthentication.SecureLevel 2D人脸识别建议使用SECURE_LEVEL_S2，3D人脸识别建议使用SECURE_LEVEL_S3。// 分别为AUTH_TYPE_BIOMETRIC_FINGERPRINT_ONLY指纹识别。// AUTH_TYPE_BIOMETRIC_FACE_ONLY脸部识别。// AUTH_TYPE_BIOMETRIC_ALL指纹和面部。// 人脸识别不支持或存在其他问题 ，直接回显页面，// 切换前后置摄像头图标。
鸿蒙最新IDE（DevEco Studio）绝密档案大揭秘，绝对有你不知道的东西！
热门推荐
一个被知识诅咒的人
06-04 3万+
公元2021年6月2日，鸿蒙系统迎来了第2次开源，同时，用于开发鸿蒙App的DevEco Studio也迎来了重大的更新，这次更新是具有里程碑意义的，因为增加了很多非常牛叉的功能，而且编译速度得到了显著的提升。尤其是分布式模拟器，可以在无需真机的情况下开发分布式鸿蒙App。本文将深入讲解DevEco Studio推出的一些核心特性。
DevEco Studio安装配置及汉化（超详细）
qq_71214810的博客
12-25 8023
HUAWEI DevEco Studio for OpenHarmony 是华为推出的一个针对操作系统的集成开发环境（IDE），它提供了一系列功能来帮助开发者在 OpenHarmony 平台上进行应用程序的开发和调试。
HarmonyOS 使用DevEcoStudio创建一个xml布局以及引用布局
小牧在一直在学习,在前进的道路上大家一起学习，进步。
06-25 1632
文字描述创建 打开DevEco ，entry > src > main>resources>base”，右键点击“layout”文件夹，选择“New >Layout ResourceFile”，命名为“main_layout” 具体的截图演示 1 找到layout 2 New >Layout ResourceFile 3 取名字并选择布局样式 点击ok' 4 创建完毕 HarmonyOS 的xml 应用 1 打开一个切片S...
DevEco Studio下载安装、创建项目详细教程（2024）
m0_74451345的博客
01-06 2万+
HarmonyOS
鸿蒙/DevEco Studio的Text组件基本使用
weixin_69253778的博客
04-20 1037
rce格式，读取本地资源文件(限定词目录）1，声明Text组件并设置文本内容。string格式，直接填写文本内容。
DevEco组件（笔记）
weixin_46949627的博客
11-19 4110
JAVA鸿蒙开发中，组件的基本用法
uniapp获取元素距离顶部的距离
seimeii的博客
03-01 6124
var that=this; const query = uni.createSelectorQuery().in(that); query.select('元素').boundingClientRect(data => { console.log(data) }).exec();
flutte布局笔记
09-13
对于Flutter布局的笔记，根据引用和引用，了解基本的用法后，我建议你继续学习DSL语法，并尝试实现一个自己的布局框架。这样可以更深入地理解Flutter的布局原理和使用方法。 同时，引用提到了目前在布局方面最流行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值