DevEco布局（笔记）

最新推荐文章于 2024-04-12 20:44:54 发布
最新推荐文章于 2024-04-12 20:44:54 发布
阅读量982 收藏
点赞数 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
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css网页布局学习笔记
01-15
css网页布局学习笔记css网页布局学习笔记css网页布局学习笔记css网页布局学习笔记css网页布局学习笔记css网页布局学习笔记
flex弹性布局用法笔记
01-20
（本笔记用于参考查找） flex弹性布局display:flex介绍1.flex-direction:row|row-reverse|column|column-reverse|initial|inherit (盒子排列方向)2.flex-wrap: nowrap|wrap|wrap-reverse(拆行或拆列)附加：flex-flow（1，2的结合写法）3.justify-content: flex-start|flex-end|center|space-between|space-around(主轴方向（默认水平方向）项目之间与以及周围的空间)4.align-items: stretch
DevEco Studio项目构建讲解、编写页面、布局介绍
X7gUWZnYP的博客
04-01 1374
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。下图是我进阶学习所积累的历年腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节祝大家都能得到自己心仪工作。自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
HarmonyOS像素转换-如何使用像素单位设置组件的尺寸。
2401_82546228的博客
03-29 1046
本篇Codelab介绍像素单位的基本知识与像素单位转换API的使用。通过像素转换案例，向开发者讲解了如何使用像素单位设置组件的尺寸、字体的大小以及不同像素单位之间的转换方法。主要功能包括：
DevEco Studio 的组件布局和事件内容（笔记）
weixin_46949627的博客
10-26 1838
本文选择的是Java开发模式，不是Js+Java的开发模式 一、组件、布局、事件 组件：屏幕展示出来的元素，文本、按钮、图片等。 布局：组件摆放方式 事件：可以被组件识别的操作 二、事件 常见的有：单击、双击、长按、滑动等 单击事件 修改ability_main.xml <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/r
学习ArkTS -- 常用组件使用
最新发布
m0_38036750的博客
04-12 454
学习arkTS 常用组件学习
微信小程序怎么获取标签的距离顶部的高度？？
qq_53244180的博客
11-18 2415
微信小程序怎么获取标签的距离顶部的高度？？
uniapp获取元素距离顶部的距离
seimeii的博客
03-01 5969
var that=this; const query = uni.createSelectorQuery().in(that); query.select('元素').boundingClientRect(data => { console.log(data) }).exec();
一个div盒子里文字如何置于左上角
初心不改
08-10 4987
<div class="container"> 这是一段文字 </div> <style> .container { background: #409EFF; //盒子背景色 padding-top: 5px; //内边距元素距顶端距离 text-align: left; //文字居左 font-size: 16px; //文字大小 line-height: 30px; //行高，设置文字距div顶部距离 } </style
【HarmonyOS】自定义组件之JavaUI实现通用标题栏组件
华为开发者联盟
04-25 595
平时我们在开发一个应用时，我们都知道一个完整的项目中会有很多个页面，而这些页面中会有许多通用的部分，比如通用标题栏、通用Dialog、通用下拉菜单等等，在Android开发中我们可以通过LayoutInflater.from(Context).inflate(layout,root,false)解析XML布局，从而将多个Android中内置的控件实现一个组合式的自定义View，以达到组件通用化，提高代码的复用性的效果。
Extjs学习笔记之七 布局
01-19
1. AbsoluteLayout 可以通过Panel内部组件的决定位置来布局。通过x,y来指定。 示例用法： 代码如下: new Ext.Panel({ layout: ‘absolute’, title: ‘AbsuluteLayout’, renderTo: document.body, frame: true, ...
flex布局笔记flex布局笔记
04-03
flex布局笔记
鸿蒙开发学习笔记 -黑马（持续更新）
weixin_54313757的博客
12-31 1822
鸿蒙开发学习
PyGobject（十九）布局容器之Alignment
Yu的专栏
07-26 1789
Gtk.Alignment继承关系Gtk.Alignment控制子部件的对齐方式和大小。Gtk.Alignment是Gtk.Bin的直接子类
PIE框架基本接口使用方法
weixin_45260032的博客
08-04 1527
Hello PIE（未完成） 算法层 + SystemAlgo库 要服务于图像处理功能的开发， 定义了ISystemAlgo接口和AlgoFactory类。 ISystemAlgo接口是算法的基础接口，它定义了算法实现的规则， AlgoFactory对象实现了对各种算法的同步或异步调用的管理和监视。 + CommonAlgo库 其包含了PIE桌面版中几乎所有的图像处理的算法。 组件层 + SystemUI库 定义了被PIE用户界面组件所使用的对象，ICommand、ICommandControl、ITool
21.UITextField
Murphy_Shi
05-23 283
UITextField 显示效果 外框设置 背景设置 字体设置 键盘设置 字母设置 改变return键 文本位置 其他设置 协议 函数 纠错功能 键盘收回 编辑状态 通知事件 限制输入UITextField显示效果外框设置 //如果自定义了背景图片会被忽略此功能 //UITextBorderStyleNone: 正常 //UITextBorderStyleLine
鸿蒙应用开发 | 滚动视图(ScrollView) 的功能和用法
08-09 2821
导语：大家好，我是你们的朋友 朋哥，十年码农经验，对技术情有独钟。 app开发很常见的数据太多，需要完整显示的时候用到滚动效果，今天来看看鸿蒙种的布局滚动ScrollView。 不多说，今天的内容不多，下面我们开始今天的文章，还是老规矩，通过如下几点来说： 1，简介2，属性 3，实战 简介 ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。 比如一个手机界面分为两部分 ，一部分是功能菜单，下一部分是列表，为了显示更多的内容需要...
DevEco组件（笔记）
weixin_46949627的博客
11-19 2975
JAVA鸿蒙开发中，组件的基本用法
deveco studiohtml
06-13
Deveco Studio是一个用于开发跨平台应用程序的集成开发环境（IDE），它支持多种编程语言，包括HTML、CSS、JavaScript等。 在Deveco Studio中使用HTML，可以按照以下步骤操作： 1. 创建一个新的HTML文件：在Deveco Studio中，选择“新建文件”菜单，然后选择“HTML文件”选项，创建一个新的HTML文件。 2. 编写HTML代码：在打开的HTML文件中，输入你的HTML代码，包括标签、属性和内容等。 3. 预览HTML页面：在Deveco Studio中，可以通过点击“预览”按钮，查看你的HTML页面的效果。 4. 调试HTML页面：如果你的HTML页面出现了问题，可以使用Deveco Studio的调试工具来找出问题所在，并进行修复。 总之，Deveco Studio提供了一个强大而灵活的开发环境，可以帮助开发者轻松地创建和调试HTML页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值