下面是DS的一个最普通的布局

鸿蒙系统pc版镜像 鸿蒙os镜像文件_鸿蒙系统pc版镜像

<?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">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="$string:app_name"
        ohos:text_color="$color:white"
        ohos:text_size="50"
        />

</DirectionalLayout>

很多人第一眼看见就会觉得，这个是什么鬼东西啊，怎么跟AS的很不一样啊！！一个都看不懂是怎么回事啊~不要急，慢慢的一行行来看！

首先，DirectionalLayout是定向布局，创建xml的时候默认的是DirectionalLayout布局，当然还有其他的布局。

DS布局类组件如下：

DirectionalLayout（定向布局，可以理解为AS的线性布局）

DependentLayout（依赖布局，可以理解为AS的相对布局）

PositionLayout（位置布局）

TableLayout（表格布局）

AdaptiveBoxLayout（自适应盒式布局）

StackLayout（堆叠布局）

鸿蒙系统pc版镜像 鸿蒙os镜像文件_xml_02


那ohos是啥呢？其实，可以把它理解为AS布局文件中的android。

那接下来的这些就是DirectionalLayout布局的长、宽、方向了，都跟AS是一样的。

ohos:height="match_parent"= 
    ohos:width="match_parent"
    ohos:orientation="vertical"

值得注意的是

在DS中，match_parent表示和父组件一样的长度（长度充满父容器），也就是AS里的match_parent。

但是，在DS中，match_content表示和自身内容一样的长度（长度包裹内容），可以当作AS里的wrap_content。

接下来，可以看见Text，Text用于文本的展示。

DS显示类组件如下：

Text（用于文本显示）、Image（用于图像显示）、Clock、TickTimer、ProgressBar

DS还有交互类的组件：

TextField（文本输入框）、Button（按钮，提供了点击响应功能）、Checkbox、RadioButton/RadioContainer、Switch、ToggleButton、Slider（提供了进度选择功能等）、Rating、ScrollView、TabList、ListContainer、PageSlider、PageFlipper、PageSliderIndicator、Picker、TimePicker、DatePicker、SurfaceProvider、ComponentProvider

然后，会发现DS里Text内的id属性、background_element属性、text属性和text_color属性的值跟AS的不太一样，都带有== $ 这个符号，其实，可以把 $ 当作AS的** @ **， : ==可以看成AS的** / **。

鸿蒙系统pc版镜像 鸿蒙os镜像文件_xml_03


在AS中，表示创建该控件的id是使用

android:id="@+id/名称"

android:id="@+id/text_helloworld"

在DS中，表示创建该控件的id则使用
ohos:id="$+id:名称"

ohos:id="$+id:text_helloworld"

这样就明白了吧~
接下来这句话是

ohos:background_element="$graphic:background_ability_main"

表示，background_element控件背景的值是引用graphic文件夹下的background_ability_main.xml

鸿蒙系统pc版镜像 鸿蒙os镜像文件_鸿蒙系统pc版镜像_04

<?xml version="1.0" encoding="UTF-8" ?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">

    <solid
        ohos:color="#FFBB86FC"/>
</shape>

这是绘制了一个==#FFBB86FC颜色的rectangle==矩形背景
回到ability_main.xml

ohos:layout_alignment="horizontal_center"

这是表示该控件设置在相对于父控件水平居中的位置

ohos:text_color="$color:white"

这是表示，字体颜色引用了color.json的white

鸿蒙系统pc版镜像 鸿蒙os镜像文件_xml_05

ohos:text_size="50"

这句话表示字体大小为50，单位为px，px可省略

也可以写50fp，但fp不可省略

值得注意的是，50与50fp所表示的大小并不一样！！！

在DS中，fp（font-size pixels）表示字体像素（在表示文字大小时使用），vp（virtual pixels）表示虚拟像素（在表示尺寸大小时使用），可以把fp当成AS的sp，vp当成AS的dp，px当然都是一样的了

值得一提的是，可以发现color和size前都带有text，这表示，text_color与text_size都是Text组件独有的属性

鸿蒙系统pc版镜像 鸿蒙os镜像文件_Text_06


好啦，就差不多把xml布局文件学会啦

最后，来做一个DS布局文件和AS布局文件的总的对比吧

鸿蒙系统pc版镜像 鸿蒙os镜像文件_app_07


鸿蒙系统pc版镜像 鸿蒙os镜像文件_鸿蒙系统pc版镜像_08


鸿蒙系统pc版镜像 鸿蒙os镜像文件_Text_09


鸿蒙系统pc版镜像 鸿蒙os镜像文件_xml_10


附：鸿蒙中那些简单的控件请参考本人的鸿蒙基础控件、鸿蒙进阶控件文章

本文完整项目代码可以去本人的资源中下载~