您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

鸿蒙系统中DirectionalLayout线性布局

鸿蒙系统中DirectionalLayout线性布局

  • 前言
  • 前期准备
    • 新建项目
    • 新建线性布局页面
  • 排列方式
    • 垂直排列
    • 水平排列
  • 对其方式
  • 权重

前言

DirectionalLayout布局用于将一组组件(Component)按照水平或者垂直方向排布,能够方便地对齐布局内的组件。
DirectionalLayout的自有XML属性以及所包含组件可支持的XML属性如下
在这里插入图片描述
在这里插入图片描述

参考文档

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-directionallayout-0000001050769565

实现效果如下:在这里插入图片描述
下面我们就在用案例来说明

前期准备

新建项目

我们打开开发工具DevEco Studio,然后点击新建项目弹出页面
在这里插入图片描述
我们在这个页面上选择phone和EmptyFeatureAbility(Java)->next
在这里插入图片描述
填好相应的项目信息后,点击finish新建项目

新建线性布局页面

我们在邮件点击新建线性布局页面的文件夹,然后new->Ability->Empty Page Ability(java)
在这里插入图片描述
弹出页面填写相应的页面名称等信息,点击finish
在这里插入图片描述
DirectionLayoutSlice中引入样式文件如下:
DirectionLayoutSlice.java:

@Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_direction_layout);
    }

MainAbility中使用这个slice
MainAbility.java:

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(DirectionLayoutSlice.class.getName());
    }
}

排列方式

线性布局的排列方式一般有垂直和水平排列,这里就用到了DirectionalLayout的自有XML属性中的orientation这个属性了

垂直排列

我们在direction_layout.xml使用垂直排列如下:在这里插入图片描述

<?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="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="red"
        ohos:text_size="50px"
        ohos:text="Button 1"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="yellow"
        ohos:text_size="50px"
        ohos:text="Button 2"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="blue"
        ohos:text_size="50px"
        ohos:text="Button 3"/>
</DirectionalLayout>

代码中,我们定义了三个按钮,这三个按钮都是宽度为330px,高度为 200px,底部边距30px,左边边距130px,字体大小50px,仅仅背景色以及文字不一致
然后在DirectionalLayout节点中定义ohos:orientation=“vertical”
打开模拟器运行效果如下:
在这里插入图片描述

水平排列

水平排列的话就需要定义ohos:orientation=“horizontal”,代码如下:

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="red"
        ohos:text_size="50px"
        ohos:text="Button 1"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="yellow"
        ohos:text_size="50px"
        ohos:text="Button 2"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:left_margin="130px"
        ohos:background_element="blue"
        ohos:text_size="50px"
        ohos:text="Button 3"/>
</DirectionalLayout>

页面效果如下:
在这里插入图片描述
我们看到,三个组件虽然水平排列了,但是Button3按钮部分未显示,这是因为DirectionalLayout不会自动换行,其子组件会按照设定的方向依次排列,若超过布局本身的大小,超出布局大小的部分将不会被显示

对其方式

DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式
当对齐方式与排列方式方向一致时,对齐方式不会生效
布局文件代码如下

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="vertical">
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="red"
        ohos:text_size="50px"
        ohos:layout_alignment="left"
        ohos:text="Button 1"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="yellow"
        ohos:text_size="50px"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Button 2"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="blue"
        ohos:text_size="50px"
        ohos:layout_alignment="right"
        ohos:text="Button 3"/>
</DirectionalLayout>

代码中我们使用垂直排列,然后第一个按钮设置为左对其,第二个按钮设置为中间对其,第三个按钮设置为右对齐,其效果如下
在这里插入图片描述
如果我们把布局设为水平排列,**ohos:orientation=“horizontal”**则效果如下:
在这里插入图片描述
对齐没有产生效果

权重

权重(weight)就是按比例来分配组件占用父组件的大小,在组件中需要用ohos:weight来配置

在水平布局下计算公式为:
父布局可分配宽度=父布局宽度-所有子组件width之和;
组件宽度=组件weight/所有组件weight之和*父布局可分配宽度;

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

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    ohos:orientation="horizontal">
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="red"
        ohos:text_size="50px"
        ohos:weight="1"
        ohos:text="Button 1"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="yellow"
        ohos:text_size="50px"
        ohos:weight="2"
        ohos:text="Button 2"/>
    <Button
        ohos:width="330px"
        ohos:height="200px"
        ohos:bottom_margin="30px"
        ohos:background_element="blue"
        ohos:text_size="50px"
        ohos:weight="1"
        ohos:text="Button 3"/>
</DirectionalLayout>

代码中,Button1和Button3占父组件宽度的四分之一,而Button2占父组件四分之二,如下:
在这里插入图片描述


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进