HarmonyOS UI开发 StackLayout(堆栈布局) 的使用

Myth丶恋晨 2022-10-08 13:28 161阅读 0赞

## StackLayout是什么 ##

StackLayout 是堆栈布局,直接在屏幕上开辟出一块空白的区域，添加到这个布局中的视图都是以层叠的方式显示，而它会把这些视图默认放到这块区域的左上角，第一个添加到布局中视图显示在最底层，最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。

注意:StackLayout无自有的XML属性

StackLayout示意图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70][]

代码如下

<?xml version="1.0" encoding="utf-8"?>
    <StackLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent">
    
        <Button
            ohos:id="$+id:button1"
            ohos:height="300fp"
            ohos:width="300fp"
            ohos:background_element="#ddd333"
            ohos:text="OS"
            ohos:text_size="20fp"/>
    
        <Button
            ohos:id="$+id:button2"
            ohos:height="200fp"
            ohos:width="200fp"
            ohos:background_element="#00d8a0"
            ohos:text="OS"
            ohos:text_size="20fp"/>
    
        <Button
            ohos:id="$+id:button3"
            ohos:height="100fp"
            ohos:width="100fp"
            ohos:background_element="#EA0000"
            ohos:text="OS"
            ohos:text_size="20fp"/>
    
        <Button
            ohos:id="$+id:button4"
            ohos:height="50fp"
            ohos:width="50fp"
            ohos:background_element="#0000C6"
            ohos:text="OS"
            ohos:text_size="20fp"/>
    
    </StackLayout>

## StackLayout所包含组件可支持的XML属性 ##

<table> 
 <thead> 
  <tr> 
   <th> <p>属性名称</p> </th> 
   <th> <p>中文描述</p> </th> 
   <th> <p>取值</p> </th> 
   <th> <p>取值说明</p> </th> 
   <th> <p>使用案例</p> </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p>layout_alignment</p> </td> 
   <td style="vertical-align:top;"> <p>对齐方式</p> </td> 
   <td style="vertical-align:top;"> <p>left</p> </td> 
   <td style="vertical-align:top;"> <p>表示左对齐。</p> </td> 
   <td style="vertical-align:top;"> <p>可以设置取值项如表中所列，也可以使用“|”进行多项组合。</p> <p>ohos:layout_alignment="top"</p> <p>ohos:layout_alignment="top|left"</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>top</p> </td> 
   <td style="vertical-align:top;"> <p>表示顶部对齐。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>right</p> </td> 
   <td style="vertical-align:top;"> <p>表示右对齐。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>bottom</p> </td> 
   <td style="vertical-align:top;"> <p>表示底部对齐。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>horizontal_center</p> </td> 
   <td style="vertical-align:top;"> <p>表示水平居中对齐。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>vertical_center</p> </td> 
   <td style="vertical-align:top;"> <p>表示垂直居中对齐。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>center</p> </td> 
   <td style="vertical-align:top;"> <p>表示居中对齐。</p> </td> 
  </tr> 
 </tbody> 
</table>

### demo练习 ###

<?xml version="1.0" encoding="utf-8"?>
    <StackLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="300fp"
        ohos:width="match_parent">
    
        <Button
            ohos:id="$+id:button1"
            ohos:height="50fp"
            ohos:width="50fp"
            ohos:layout_alignment="left"
            ohos:background_element="#ddd333"
            ohos:text="OS"
            ohos:text_size="20fp"/>
    
        <Button
            ohos:id="$+id:button2"
            ohos:height="50fp"
            ohos:width="50fp"
            ohos:layout_alignment="right"
            ohos:background_element="#00d8a0"
            ohos:text="OS"
            ohos:text_size="20fp"/>
    
        <Button
            ohos:id="$+id:button3"
            ohos:height="50fp"
            ohos:width="50fp"
            ohos:layout_alignment="bottom"
            ohos:background_element="#EA0000"
            ohos:text="OS"
            ohos:text_size="20fp"/>
    
        <Button
            ohos:id="$+id:button4"
            ohos:height="50fp"
            ohos:width="50fp"
            ohos:layout_alignment="right|bottom"
            ohos:background_element="#0000C6"
            ohos:text="OS"
            ohos:text_size="20fp"/>
    
        <Button
            ohos:id="$+id:button5"
            ohos:height="50fp"
            ohos:width="50fp"
            ohos:layout_alignment="center"
            ohos:background_element="#0000C6"
            ohos:text="OS"
            ohos:text_size="20fp"/>
    
    </StackLayout>

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1][]

[官方参考地址链接][Link 1]

其他的布局

[HarmonyOS UI开发 TableLayout(表格布局) 的使用][HarmonyOS UI_ TableLayout_]

[HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用][HarmonyOS UI_ AdaptiveBoxLayout_]

[HarmonyOS UI开发 PositionLayout(位置布局) 的使用][HarmonyOS UI_ PositionLayout_]

[HarmonyOS UI开发 DependentLayout(依赖布局) 的使用][HarmonyOS UI_ DependentLayout_]

[HarmonyOS UI开发 DirectionalLayout(定向布局) 的使用][HarmonyOS UI_ DirectionalLayout_]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70]: /images/20221005/dff09d78834a4260a1ef46bbe244fb89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1]: /images/20221005/ea916972a28d403f811691601c596fad.png
[Link 1]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-stacklayout-0000001060357540
[HarmonyOS UI_ TableLayout_]: https://huxiaomu.blog.csdn.net/article/details/118198350
[HarmonyOS UI_ AdaptiveBoxLayout_]: https://huxiaomu.blog.csdn.net/article/details/118164657
[HarmonyOS UI_ PositionLayout_]: https://huxiaomu.blog.csdn.net/article/details/118163933
[HarmonyOS UI_ DependentLayout_]: https://huxiaomu.blog.csdn.net/article/details/118076995
[HarmonyOS UI_ DirectionalLayout_]: https://huxiaomu.blog.csdn.net/article/details/118075010