codecamp

鸿蒙OS DirectionalLayout

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

图1 DirectionalLayout 示意图 img

排列方式

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

  • 垂直排列

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

图2 三个垂直排列的按钮 img

  <?xml version="1.0" encoding="utf-8"?>
  <DirectionalLayout
      xmlns:ohos="http://schemas.huawei.com/res/ohos"
      ohos:width="match_parent"
      ohos:height="match_content"
      ohos:orientation="vertical">
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:bottom_margin="3vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 1"/>
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:bottom_margin="3vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 2"/>
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:bottom_margin="3vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 3"/>
  </DirectionalLayout>

color_cyan_element.xml：

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
      ohos:shape="rectangle">
      <solid
          ohos:color="#ff00ffff"/>
  </shape>

  • 水平排列

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

图3 三个水平排列的按钮 img

  <?xml version="1.0" encoding="utf-8"?>
  <DirectionalLayout
      xmlns:ohos="http://schemas.huawei.com/res/ohos"
      ohos:width="match_parent"
      ohos:height="match_content"
      ohos:orientation="horizontal">
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 1"/>
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 2"/>
      <Button
          ohos:width="33vp"
          ohos:height="20vp"
          ohos:left_margin="13vp"
          ohos:background_element="$graphic:color_cyan_element"
          ohos:text="Button 3"/>
  </DirectionalLayout>

color_cyan_element.xml：

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
      ohos:shape="rectangle">
      <solid
          ohos:color="#ff00ffff"/>
  </shape>

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="20vp"
    ohos:orientation="horizontal">
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="166vp"
        ohos:height="match_content"
        ohos:left_margin="13vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#ff00ffff"/>
</shape>

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

图4 DirectionalLayout 不自动换行示例 img

对齐方式

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="60vp">
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="left"
        ohos:text="Button 1"/>
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Button 2"/>
    <Button
        ohos:width="50vp"
        ohos:height="20vp"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:layout_alignment="right"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#ff00ffff"/>
</shape>

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

权重

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

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

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

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

img

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 1"/>
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text="Button 2"/>
    <Button
        ohos:width="0vp"
        ohos:height="20vp"
        ohos:weight="1"
        ohos:background_element="$graphic:color_cyan_element"
        ohos:text="Button 3"/>
</DirectionalLayout>

color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#ff00ffff"/>
</shape>

color_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#ff888888"/>
</shape>

场景示例

点击放大

源码示例：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="$graphic:color_light_gray_element">
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:orientation="vertical">
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 2"/>
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <Component ohos:height="20vp"/>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:orientation="horizontal">
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 2"/>
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <Component ohos:height="20vp"/>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="20vp"
        ohos:orientation="horizontal">
        <Button
            ohos:width="166vp"
            ohos:height="match_content"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="166vp"
            ohos:height="match_content"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 2"/>
        <Button
            ohos:width="166vp"
            ohos:height="match_content"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <Component ohos:height="20vp"/>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="60vp">
        <Button
            ohos:width="50vp"
            ohos:height="20vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:layout_alignment="left"
            ohos:text="Button 1"/>
        <Button
            ohos:width="50vp"
            ohos:height="20vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:layout_alignment="horizontal_center"
            ohos:text="Button 2"/>
        <Button
            ohos:width="50vp"
            ohos:height="20vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:layout_alignment="right"
            ohos:text="Button 3"/>
    </DirectionalLayout>
    <Component ohos:height="20vp"/>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:orientation="horizontal">
        <Button
            ohos:width="0vp"
            ohos:height="20vp"
            ohos:weight="1"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="0vp"
            ohos:height="20vp"
            ohos:weight="1"
            ohos:background_element="$graphic:color_gray_element"
            ohos:text="Button 2"/>
        <Button
            ohos:width="0vp"
            ohos:height="20vp"
            ohos:weight="1"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 3"/>
    </DirectionalLayout>
</DirectionalLayout>

color_light_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#ffeeeeee"/>
</shape>

color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#ff00ffff"/>
</shape>

color_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#ff888888"/>
</shape>
鸿蒙OS Button
鸿蒙OS DependentLayout
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

鸿蒙OS 入门

鸿蒙OS 概述

鸿蒙OS 开发基础知识

鸿蒙OS 快速入门

鸿蒙OS 开发

鸿蒙OS Ability

鸿蒙OS Ability

鸿蒙OS 分布式任务调度

鸿蒙OS 公共事件与通知

鸿蒙OS 剪贴板

鸿蒙OS 线程

鸿蒙OS UI

鸿蒙OS Java UI框架

鸿蒙OS JS UI框架

鸿蒙OS 多模输入

鸿蒙OS 媒体

鸿蒙OS 视频

鸿蒙OS 图像

鸿蒙OS 相机

鸿蒙OS 音频

鸿蒙OS 媒体会话管理

鸿蒙OS 媒体数据管理

鸿蒙OS 安全

鸿蒙OS AI

鸿蒙OS 网络与连接

鸿蒙OS NFC

鸿蒙OS 蓝牙

鸿蒙OS WLAN

鸿蒙OS 网络管理

鸿蒙OS 电话服务

鸿蒙OS 设备管理

鸿蒙OS 数据管理

鸿蒙OS 对象关系映射数据库

鸿蒙OS 轻量级偏好数据库

鸿蒙OS 分布式数据服务

鸿蒙OS 分布式文件服务

鸿蒙OS 融合搜索

鸿蒙OS 数据存储管理

鸿蒙OS 设备

鸿蒙OS 车机

鸿蒙OS 智能穿戴

鸿蒙OS 智慧屏

鸿蒙OS 工具

鸿蒙OS HUAWEI DevEco Studio使用指南

鸿蒙OS 工程管理

鸿蒙OS 代码编辑

鸿蒙OS 编译构建

鸿蒙OS 应用运行

鸿蒙OS 应用调试

鸿蒙OS 应用发布

鸿蒙OS 术语

鸿蒙OS 常见问题

鸿蒙OS Java API参考

鸿蒙OS 方舟注释

鸿蒙OS 方舟系统

鸿蒙OS ohos.aafwk.ability

鸿蒙OS ohos.aafwk.ability interface

鸿蒙OS ohos.aafwk.ability class

鸿蒙OS ohos.aafwk.ability enum

鸿蒙OS ohos.aafwk.ability exception

鸿蒙OS ohos.aafwk.ability.delegation

鸿蒙OS ohos.Utils.net

鸿蒙OS ohos.aafwk.abilityjet.activedata

鸿蒙OS ohos.aafwk.content

鸿蒙OS ohos.app

鸿蒙OS ohos.bundle

鸿蒙OS ohos.bundle interface

鸿蒙OS ohos.bundle class

鸿蒙OS ohos.bundle enum

鸿蒙OS ohos.rpc

鸿蒙OS java.lang

鸿蒙OS java.lang interface

鸿蒙OS java.lang class

鸿蒙OS java.lang enum

鸿蒙OS java.lang exception

鸿蒙OS java.lang error

鸿蒙OS java.lang annotation

鸿蒙OS java.net

鸿蒙OS java.net Interface

鸿蒙OS java.net Class

鸿蒙OS java.Util

鸿蒙OS java.Util interface

鸿蒙OS java.Util class

鸿蒙OS ohos.data.rdb

鸿蒙OS ohos.utils

鸿蒙OS ohos.data.dataability

鸿蒙OS ohos.data.dataability class

鸿蒙OS ohos.accessibility

鸿蒙OS ohos.agp.components

鸿蒙OS ohos.agp.components interface

鸿蒙OS ohos.agp.components class

鸿蒙OS ohos.agp.transition

鸿蒙OS ohos.agp.window.service

鸿蒙OS ohos.event.notification

鸿蒙OS ohos.event.notification interface

鸿蒙OS ohos.event.notification class

鸿蒙OS ohos.global.configuration

鸿蒙OS ohos.multimodalinput.event

鸿蒙OS java.io

鸿蒙OS java.io interface

鸿蒙OS java.io class

鸿蒙OS java.io exception

鸿蒙OS ohos.global.resource

鸿蒙OS ohos.data.resultset

鸿蒙OS ohos.data.resultset interface

鸿蒙OS ohos.agp.utils

鸿蒙OS javax.sql

鸿蒙OS javax.sql class

附

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }