创新互联鸿蒙OS教程：鸿蒙OSDirectionalLayout

DirectionalLayout 是 Java UI 中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。该布局和其他布局的组合，可以实现更加丰富的布局方式。

创新互联是一家专注于网站设计、成都做网站与策划设计,大余网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:大余等地区。大余做网站价格咨询:18982081108

图1 DirectionalLayout 示意图

排列方式

DirectionalLayout 的排列方向（orientation）分为水平（horizontal）或者垂直（vertical）方向。使用 orientation 设置布局内组件的排列方式，默认为垂直排列。

• 垂直排列

垂直方向排列三个按钮，效果如下：

图2 三个垂直排列的按钮

color_cyan_element.xml：

• 水平排列

水平方向排列三个按钮，效果如下：

图3 三个水平排列的按钮

color_cyan_element.xml：

DirectionalLayout 不会自动换行，其子组件会按照设定的方向依次排列，若超过布局本身的大小，超出布局大小的部分将不会被显示，例如：

color_cyan_element.xml：

此布局包含了三个按钮，但由于 DirectionalLayout 不会自动换行，超出布局大小的组件部分无法显示。界面显示如下：

图4 DirectionalLayout 不自动换行示例

对齐方式

DirectionalLayout 中的组件使用 layout_alignment 控制自身在布局中的对齐方式，当对齐方式与排列方式方向一致时，对齐方式不会生效，如设置了水平方向的排列方式，则左对齐、右对齐将不会生效。常用的对齐参数见[表1]。

参数	作用	可搭配排列方式
left	左对齐	垂直排列
top	顶部对齐	水平排列
right	右对齐	垂直排列
bottom	底部对齐	水平排列
horizontal_center	水平方向居中	垂直排列
vertical_center	垂直方向居中	水平排列
center	垂直与水平方向都居中	水平/垂直排列

三种对齐方式的示例代码：

color_cyan_element.xml：

图5 三种对齐方式效果示例

权重

权重（weight）就是按比例来分配组件占用父组件的大小，在水平布局下计算公式为：

父布局可分配宽度=父布局宽度-所有子组件 width 之和；

组件宽度=组件 weight/所有组件 weight 之和*父布局可分配宽度；

实际使用过程中，建议使用 width=0 来按比例分配父布局的宽度，1:1:1 效果如下：

color_cyan_element.xml：

color_gray_element.xml：

场景示例

源码示例：

color_light_gray_element.xml：

color_cyan_element.xml：

color_gray_element.xml：

新闻标题：创新互联鸿蒙OS教程：鸿蒙OSDirectionalLayout
网站地址：http://www.csdahua.cn/qtweb/news38/297438.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网