常用布局
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
ohos:weight="1"
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
