更多内容请访问：Harmonyos.51cto.com/#zz本节我们将使用DirectionalLayout（单向排列布局，我们也可以称之为线性布局）来实现下面的UI图示例。UI图拆解一般我们从UI工程师那里拿到UI界面设计图后，上面会有很多属性，比如尺寸标注。当我们学会了所有的布局和组件后，我们就可以使用一种或多种布局和组件进行组合，实现复杂的界面效果。上面，我手动拖放了一个音乐播放界面。每个属性的值我都没有标注。只是用来学习DirectionalLayout布局的使用。不要在意它的美丽。首先，我们获取到之后，根据上面的标签信息和组件功能点等一系列参数，将整个UI界面图按照布局划分成多个模块占据父布局，然后编写具体的子组件信息按划分布局。根据用户的交互性，我将整个页面分为两部分，上半部分是展示类，下半部分是控件类。在底部的控制区，有一系列的操作按钮，排列整齐，居中。在上半部分的显示区域，我根据控件的类型，将区域分成了左右结构的两部分。左侧区域显示词曲作者头像，右侧区域显示歌曲信息。右侧的歌曲信息区分为上下两个区域。上方区域用于显示歌曲名称和歌词、作曲和主唱信息，下方区域显示歌词内容。LayoutOccupancy上面我们通过不同的功能和特性，将整个UI图拆解成了多个部分。现在我们将使用DirectionalLayout布局来进行具体的布局占用。①首先，我们将整个布局按照权重分为上下两个区域，上区域占4份，下区域占1份。
