harmonyOS应用-StackLayout布局

StackLayout布局

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

在XML 中创建StackLayout

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

color_gray_element.xml

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

使用默认布局添加组件StackLayout中组件的布局默认在区域的左上角，并且以后创建的组件会在上层。

上图对应的XML布局文件

<?xml version="1.0" encoding="utf-8"?>
<StackLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:id="$+id:stack_layout"
    ohos:background_element="$graphic:color_gray_element"
    >
    <Text
    ohos:id="$+id:text_stack_1"
    ohos:text="stack_layout_first"
    ohos:text_size="35fp"
    ohos:height="400vp"
    ohos:width="400vp"
    ohos:background_element="$graphic:color_cyan_element"
    ohos:text_alignment="bottom|horizontal_center"
    />
    <Text
        ohos:id="$+id:text_stack_2"
        ohos:text="stack_layout_second"
        ohos:text_size="20fp"
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text_alignment="bottom|horizontal_center"
        />
    <Text
        ohos:id="$+id:text_stack_3"
        ohos:text="stack_layout_third"
        ohos:text_size="20fp"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="$graphic:color_red_element"
        ohos:text_alignment="bottom|horizontal_center"
        />
</StackLayout>
              

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="#ffbbbbbb"/>
</shape>
              

color_red_element.xml

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

使用layout_alignment属性可以指定组件在StackLayout中的相对位置
上图对应的XML

 <?xml version="1.0" encoding="utf-8"?>
<StackLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:id="$+id:stack_layout"
    ohos:background_element="$graphic:color_gray_element"
    >
    <Text
    ohos:id="$+id:text_stack_1"
    ohos:text="stack_layout_first"
    ohos:text_size="35fp"
    ohos:height="350vp"
    ohos:width="350vp"
    ohos:background_element="$graphic:color_cyan_element"
    ohos:text_alignment="bottom|horizontal_center"
    ohos:layout_alignment="right"
    />
    <Text
        ohos:id="$+id:text_stack_2"
        ohos:text="stack_layout_second"
        ohos:text_size="20fp"
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:background_element="$graphic:color_gray_element"
        ohos:text_alignment="bottom|horizontal_center"
        ohos:layout_alignment="right"
        />
    <Text
        ohos:id="$+id:text_stack_3"
        ohos:text="stack_layout_third"
        ohos:text_size="20fp"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="$graphic:color_red_element"
        ohos:text_alignment="bottom|horizontal_center"
        ohos:layout_alignment="right"
        />
</StackLayout>
              

场景展示将子视图从后面移到前面显示，官网图片

没有更详细的文档说明关于API或者属性的说明，目前还不知道更多的使用方法，需要在以后慢慢学习

                ComponentContainer stackLayout = (ComponentContainer)findComponentById(ResourceTable.Id_stack_layout);
Text text = (Text)findComponentById(ResourceTable.Id_text_stack_1);
if(text != null){
    text.setClickedListener(new Component.ClickedListener() {
        @Override
        public void onClick(Component component) {
            HiLog.error(label, "stackLayout.getChildCount() = " + stackLayout.getChildCount() + " count = " + count);
                stackLayout.moveChildToFront(component);
        }
    });
}