鸿蒙pageslider,2021-01-22鸿蒙开发（二）

常用布局

1.线性布局DirectionalLayout

·DirectionalLayout是将布局横向或者纵向排列下来的

分为horizontal和vertical

vertical：

image.png

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:orientation="vertical">

ohos:height="30vp"

ohos:width="60vp"

ohos:background_element="$graphic:background_ability_main"

ohos:text="Button1"/>

ohos:height="30vp"

ohos:top_margin="20fp"

ohos:width="60vp"

ohos:background_element="$graphic:background_ability_main"

ohos:text="Button2"/>

ohos:height="30vp"

ohos:width="60vp"

ohos:top_margin="20fp"

ohos:background_element="$graphic:background_ability_main"

ohos:text="Button3"/>

horizontal:

image.png

weight的使用

·weight是按照组件的权重来分配组件按照父组件的可分配宽度之和

水平方向weight=0；

如果等于1的话三个按钮就是三等分如图效果

image.png

ohos:weight="1"

2.相对布局DependentLayout

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

image.png

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:orientation="horizontal">

ohos:id="$+id:btn1"

ohos:height="30vp"

ohos:width="60vp"

ohos:background_element="$graphic:background_ability_main"

ohos:text="Button1"/>

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

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

交互类组件

如文本框，按钮，复选框，选择器，等

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