chart控件详细示例_HarmonyOS Java UI之DirectionalLayout布局示例

本小节我们将使用DirectionalLayout(单一方向排列布局，我们也可以将其称为线性布局)来实现下面UI图的示例。

一般我们从UI工程师手里拿到UI界面设计图后，上面有很多尺寸标记等属性。在我们学习了所有布局和组件后，我们完全可以使用一个或者多个布局和组件组合在一起，实现复杂的界面效果。

上面我自己手动拖拽了一个音乐播放界面，没有标注各个属性值，仅用于学习DirectionalLayout布局的使用，不要在意它的美观。

首先我们拿到后，根据上面的标注信息以及组件功能要点等一系列参数，将整个UI界面图根据布局划分多个模块进行父布局占位，然后再根据划分的布局来编写具体的子组件信息。

我根据用户的交互性将整个页面以上下结构划分为两部分，上部分为展示型、下部分为控件型。在底部控件区域，是一系列操作按钮，它们在一个布局中，居中排列。

在上部分的展示区域，我又根据控件类型将区域以左右结构划分为两个部分，左区域显示歌曲作者头像，右侧区域显示歌曲信息。

在右侧歌曲信息区域又划分为上下两个区域，上区域用于展示歌曲名称及作词作曲主唱信息，下区域显示歌词内容。

在上面我们已经通过不同的功能，不同的特性将整个UI图拆解成多个部分，现在我们将使用DirectionalLayout布局来进行具体布局占位。

① 首先，我们将整个布局根据权重分为上下两个区域，上区域占4份，下区域占1份。

<?xml  version="1.0" encoding="utf-8"?><DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"                   ohos:width="match_parent"                   ohos:height="match_parent"                   ohos:background_element="#5c6d71"                   ohos:orientation="vertical">    <DirectionalLayout            ohos:id="$+id:topLayout"            ohos:width="match_parent"            ohos:height="0vp"            ohos:weight="4">        <Text            ohos:width="match_parent"            ohos:height="match_parent"            ohos:text="上"/>    DirectionalLayout>    <DirectionalLayout            ohos:id="$+id:centerLayout"            ohos:width="match_parent"            ohos:height="0vp"            ohos:background_element="#009688"            ohos:weight="1">        <Text                ohos:width="match_parent"                ohos:height="ma