HarmonyOS开发51：线性布局：DirectionalLayout

GeniusAng丶

于 2021-08-25 19:05:27 发布

阅读量165

点赞数 1

分类专栏：鸿蒙开发文章标签：鸿蒙开发华为 xml 布局

本文链接：https://blog.csdn.net/weixin_45707277/article/details/119917321

版权

鸿蒙开发专栏收录该内容

58 篇文章 26 订阅

订阅专栏

本文介绍了Ohos中的布局组件，特别是线性布局的使用。通过示例代码展示了如何设置DirectionalLayout的垂直方向，并解释了权重(weight)的概念。在示例中，两个Button按钮通过权重分配在垂直布局中占据不同比例的空间，权重高的按钮占据了更大的区域。此外，还包含了一个Image组件。运行效果展示了这种布局的实际显示效果。

摘要由CSDN通过智能技术生成

布局：
继承结果：布局是一种特殊的容器类组件

在这里插入图片描述

接下来，我们先来看线性布局：
在这里插入图片描述
也可以通过代码改为水平方向

接下来，代码演示权重该如何使用

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:orientation="vertical">

    <Button
        ohos:height="0vp"
        ohos:width="100vp"
        ohos:text="点我1"
        ohos:text_size="35fp"
        ohos:text_color="#FFFFFF"
        ohos:text_alignment="center"
        ohos:background_element="#21a8fd"
        ohos:weight="2"/>

    <Button
        ohos:height="0vp"
        ohos:width="100vp"
        ohos:text="点我2"
        ohos:text_size="35fp"
        ohos:text_color="#FFFFFF"
        ohos:text_alignment="center"
        ohos:background_element="#ff0000"
        ohos:weight="1"/>

    <Image
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:image_src="$media:girl6"/>


</DirectionalLayout>