【HarmonyOS应用开发】布局中的方向、宽度和高度

布局文件用来描述页面中包含哪些UI组件、这些UI组件是如何布局的、以及每个UI组件都长什么样。

MainAbilitySlice对应的布局文件是ability_main.xml，这个文件名起的不好，最好将其命名为slice_main.xml，以便见名知意，一看就知道这个布局文件是给AbilitySlice用的，而不是给Page Ability用的。在ability_main.xml上点击右键 -> Refactor -> Rename…，弹出的对话框如下图所示：

将ability_main修改为slice_main，将重命名的范围Scope指定为“Module ‘entry’”，点击按钮“Refactor”，就完成了重命名。

打开slice_main.xml，如下图所示：

我们来分析一下其中的组件和属性。总共定义了两个组件，外层的DirectionalLayout是一个容器组件，内层的Text是一个文本组件。对于每一个组件，都通过一系列的属性指定了该组件长什么样、以及该组件在页面中的布局，比如：高度height、宽度width、背景background-element、对齐方式layout_alignment、等等。

打开工具窗口“Previewer”，可以对slice_main.xml的UI内容进行预览，如下图所示：

容器组件DirectionalLayout用于对内部的组件进行单一方向的布局，所有位于其中的组件会按照水平方向或竖直方向进行排列。我们在其中再添加一个组件Text，将id的属性值修改为：“$+id:text_helloworld2”，点击工具窗口“Previewer”中的刷新按钮，如下图所示。因为属性orientation的值是“vertical”，所以两个组件Text按照竖直方向进行了排列。

DirectionalLayout的高度height和宽度width都设置为了“match_parent”，表示DirectionalLayout跟它的父组件具有相同的高度和宽度。DirectionalLayout是布局文件slice_main.xml中的最外层组件，对于布局文件中的最外层组件，它的父组件就是手机屏幕的窗口。我们可以给DirectionalLayout设置一个背景颜色，然后点击工具窗口“Previewer”中的刷新按钮，如下图所示。这样就可以清楚地看到，DirectionalLayout是充满整个屏幕的。