一、帧布局 StackLayout

帧布局 StackLayout 可以只设置一个宽度高度属性 , 不设置其它属性 ;

帧布局的特性是可以多层叠加 , 后面的组件会叠加在前面的组件上面 ;

帧布局 StackLayout 示例 :

下面的帧布局 , 写在后面的组件在上层 , 写在前面的组件在最底层 ;

text1 组件在最底层 , text2 组件在中间层 , text3 组件在最上层 ;

text1 组件被上面两层覆盖 , text2 组件被 text3 组件覆盖 ;

<?xml version="1.0" encoding="utf-8"?>
<StackLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent">

    <!-- 最底层 -->
    <Text
        ohos:id="$+id:text1"
        ohos:height="800"
        ohos:width="800"
        ohos:background_element="#FF0000"
        ohos:text_size="50"/>

    <!-- 中间层 -->
    <Text
        ohos:id="$+id:text2"
        ohos:height="600"
        ohos:width="600"
        ohos:background_element="#00FF00"
        ohos:text_size="50"/>

    <!-- 最上层 -->
    <Text
        ohos:id="$+id:text3"
        ohos:height="400"
        ohos:width="400"
        ohos:background_element="#0000FF"
        ohos:text_size="50"/>

</StackLayout>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
 

效果展示 :

文章来源: hanshuliang.blog.csdn.net，作者：韩曙亮，版权归原作者所有，如需转载，请联系作者。

原文链接：hanshuliang.blog.csdn.net/article/details/111659976