常用布局

1.线性布局DirectionalLayout
·DirectionalLayout是将布局横向或者纵向排列下来的
分为horizontal和vertical
vertical：

image.png

<?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="30vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text="Button1"/>

    <Button
        ohos:height="30vp"
        ohos:top_margin="20fp"
        ohos:width="60vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text="Button2"/>

    <Button
        ohos:height="30vp"
        ohos:width="60vp"
        ohos:top_margin="20fp"

        ohos:background_element="$graphic:background_ability_main"
        ohos:text="Button3"/>
</DirectionalLayout>

horizontal:

image.png

weight的使用
·weight是按照组件的权重来分配组件按照父组件的可分配宽度之和
水平方向weight=0；
如果等于1的话三个按钮就是三等分如图效果

image.png

2.相对布局DependentLayout
每个组件可以指定一个相对位置，可以使兄弟组件位置，或者父组件位置

image.png

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="horizontal">

    <Button
        ohos:id="$+id:btn1"
        ohos:height="30vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text="Button1"/>

    <Button
        ohos:id="$+id:btn2"
        ohos:height="30vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:right_of="$id:btn1"
        ohos:left_margin="20fp"
        ohos:text="Button2"/>

    <Button
        ohos:id="$+id:btn3"
        ohos:height="30vp"
        ohos:width="60vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:left_margin="20fp"

        ohos:right_of="$id:btn2"
        ohos:text="Button3"/>
</DependentLayout>

交互类组件

如文本框，按钮，复选框，选择器，等
TextField、Button、Checkbox、RadioButton/RadioContainer、Switch、ToggleButton、Slider、Rating、ScrollView、TabList、ListContainer、PageSlider、PageFlipper、PageSliderIndicator、Picker、TimePicker、DatePicker、SurfaceProvider、ComponentProvider

显示类

如文本框，图片，时间控件，等
Text、Image、Clock、TickTimer、ProgressBar