鸿蒙系统中StackLayout帧布局

14 篇文章 1 订阅
12 篇文章 0 订阅

前言

StackLayout直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左上角,第一个添加到布局中视图显示在最底层,最后一个被放在最顶层。上一层的视图会覆盖下一层的视图
在这里插入图片描述
StackLayout所包含组件可支持的XML属性见下表:
在这里插入图片描述
参考文档:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-stacklayout-0000001060357540

前期准备

我们还是使用“鸿蒙系统中DirectionalLayout线性布局”文章中使用到的demo2项目来进行测试

创建页面

我们在右键点击新建线性布局页面的文件夹,然后new->Ability->Empty Page Ability(java)
在这里插入图片描述
弹出页面填写相应的页面名称等信息,点击finish
在这里插入图片描述
StackLayoutSlice中引入样式文件如下:
StackLayoutSlice.java:

@Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_stack_layout);
    }

MainAbility中使用这个slice
MainAbility.java:

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(StackLayoutSlice.class.getName());
    }
}

StackLayout的使用

定义布局

我们在布局文件ability_stack_layout.xml中定义使用StackLayout布局组件
在这里插入图片描述
ability_stack_layout.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">
</StackLayout>

定义子组件

我们在这个帧布局组件中定义三个text子组件
ability_stack_layout.xml:

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

    <Text
        ohos:id="$+id:text_blue"
        ohos:text_alignment="bottom|horizontal_center"
        ohos:text_size="24fp"
        ohos:text="Layer 1"
        ohos:height="400vp"
        ohos:width="400vp"
        ohos:background_element="#3F56EA" />

    <Text
        ohos:id="$+id:text_light_purple"
        ohos:text_alignment="bottom|horizontal_center"
        ohos:text_size="24fp"
        ohos:text="Layer 2"
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:background_element="#00AAEE" />

    <Text
        ohos:id="$+id:text_orange"
        ohos:text_alignment="center"
        ohos:text_size="24fp"
        ohos:text="Layer 3"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#00BFC9" />

</StackLayout>

其中,我们可以看到,第一第二text定义ohos:text_alignment=“bottom|horizontal_center”,这代表定义其文字的对其方式是底部水平居中,第三个text定义ohos:text_alignment="center"则代表文字居中对齐
可以看到模拟器效果如下
在这里插入图片描述
帧布局默认放置于左上角

组件对齐

如果我们想让组件放置于右对齐则代码如下:

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

    <Text
        ohos:id="$+id:text_blue"
        ohos:text_alignment="bottom|horizontal_center"
        ohos:layout_alignment="right"
        ohos:text_size="24fp"
        ohos:text="Layer 1"
        ohos:height="400vp"
        ohos:width="400vp"
        ohos:background_element="#3F56EA" />

    <Text
        ohos:id="$+id:text_light_purple"
        ohos:text_alignment="bottom|horizontal_center"
        ohos:layout_alignment="right"
        ohos:text_size="24fp"
        ohos:text="Layer 2"
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:background_element="#00AAEE" />

    <Text
        ohos:id="$+id:text_orange"
        ohos:text_alignment="center"
        ohos:layout_alignment="right"
        ohos:text_size="24fp"
        ohos:text="Layer 3"
        ohos:height="80vp"
        ohos:width="80vp"
        ohos:background_element="#00BFC9" />

</StackLayout>

产生的效果如下:
在这里插入图片描述

场景展示

在实际应用中,我们可以定义一个点击事件,当点击后,底层组件显示上来,代码如下:
StackLayoutSlice.java:

@Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_stack_layout);
        ComponentContainer stackLayout = (ComponentContainer) findComponentById(ResourceTable.Id_stack_layout);
        Text textFirst = (Text) findComponentById(ResourceTable.Id_text_blue);
        textFirst.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                stackLayout.moveChildToFront(component);
            }
        });
    }

我们在slice里的onStart初始化方法中给最底下的Text定义了一个点击事件,当点击触发后,该组件会显示到最前面
效果如下:
点击前
在这里插入图片描述
点击后:
在这里插入图片描述

更多技术交流请加入QQ群
群名称:华为鸿蒙harmonyos开发
群 号:1164091073

  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值