#跟着坚果学鸿蒙#DirectionalLayout DirectionalLayout 是 Java UI 中的一种重要组件布局，用于将一组组件(Component) 按照水平或者垂直方向排布，能够方便地对齐布局内的组件。该布局和其他布局 的组合，可以实现更加丰富的布局方式。

排列方式 DirectionalLayout 的排列方向（orientation）分为水平（horizontal）或者垂直 （vertical）方向。使用 orientation 设置布局内组件的排列方式，默认为垂直排列。 ⚫ 垂直排列 垂直方向排列三个按钮，效果如下：

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
 xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:width="match_parent" 
 ohos:height="match_content" 
 ohos:orientation="vertical"> 
 <Button 
 ohos:width="33vp" 
 ohos:height="20vp" ohos:bottom_margin="3vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 1"/> 
 <Button 
 ohos:width="33vp" 
 ohos:height="20vp" 
 ohos:bottom_margin="3vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 2"/> <Button 
 ohos:width="33vp" ohos:height="20vp" 
 ohos:bottom_margin="3vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 3"/> 
</DirectionalLayout> 

color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="rectangle"> 
 <solid 
 ohos:color="#ff00ffff"/> 
</shape> 

水平排列 水平方向排列三个按钮，效果如下：

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
 xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:width="match_parent" 
 ohos:height="match_content" 
 ohos:orientation="horizontal"> 
 <Button ohos:width="33vp" 
 ohos:height="20vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 1"/> 
 <Button 
 ohos:width="33vp" 
 ohos:height="20vp" 
 ohos:left_margin="13vp" ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 2"/> 
 <Button 
 ohos:width="33vp" 
 ohos:height="20vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 3"/> 
</DirectionalLayout> 

color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="rectangle"> 
 <solid 
 ohos:color="#ff00ffff"/> 
</shape> 

DirectionalLayout 不会自动换行，其子组件会按照设定的方向依次排列，若超 过布局本身的大小，超出布局大小的部分将不会被显示，例如：

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
 xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:width="match_parent" 
 ohos:height="20vp" 
 ohos:orientation="horizontal"> 
 <Button 
 ohos:width="166vp" 
 ohos:height="match_content" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 1"/> 
 <Button ohos:width="166vp" 
 ohos:height="match_content" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 2"/> 
 <Button 
 ohos:width="166vp" 
 ohos:height="match_content" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 3"/> </DirectionalLayout> 

color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="rectangle"> 
 <solid 
 ohos:color="#ff00ffff"/> 
</shape> 

此布局包含了三个按钮，但由于 DirectionalLayout 不会自动换行，超出布局大 小的组件部分无法显示。界面显示如下：

对齐方式 DirectionalLayout 中的组件使用 layout_alignment 控制自身在布局中的对齐 方式，当对齐方式与排列方式方向一致时，对齐方式不会生效，如设置了水平方 向的排列方式，则左对齐、右对齐将不会生效。

三种对齐方式的示例代码：

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
 xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:width="match_parent" 
 ohos:height="60vp"> 
 <Button 
 ohos:width="50vp" 
 ohos:height="20vp" ohos:background_element="$graphic:color_cyan_element" 
 ohos:layout_alignment="left" 
 ohos:text="Button 1"/> 
 <Button 
 ohos:width="50vp" 
 ohos:height="20vp" ohos:background_element="$graphic:color_cyan_element" 
 ohos:layout_alignment="horizontal_center" 
 ohos:text="Button 2"/> 
 <Button 
 ohos:width="50vp" 
 ohos:height="20vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:layout_alignment="right" 
 ohos:text="Button 3"/> 
</DirectionalLayout> 

color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="rectangle"> 
 <solid 
 ohos:color="#ff00ffff"/> 
</shape>