您现在的位置是:首页 > 开发类 > 移动开发移动开发

鸿蒙系统中StackLayout帧布局

2021-06-05 09:10:51移动开发人已围观

简介文章目录前言前期准备创建页面StackLayout的使用定义布局定义子组件组件对齐场景展示前言StackLayout直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左上角,第一个添加到布局中视图显示在最底层,最后一个被放在最顶层。上一层的视图会覆盖下一层的视图StackLayout所包含组件可支持的XML属性见下表:参考文档:https://developer.harmonyos.com/cn/docs/documentation/

文章目录

  • 前言
  • 前期准备
    • 创建页面
  • StackLayout的使用
    • 定义布局
    • 定义子组件
    • 组件对齐
    • 场景展示

前言

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

文章来源:https://blog.csdn.net/u010574271/article/details/117484468

Tags:

很赞哦! ()

随机图文

文章评论

留言与评论(共有 0 条评论)
   
验证码:

本栏推荐

站点信息

  • 文章统计247968篇文章
  • 浏览统计18356次浏览
  • 评论统计1个评论
  • 标签管理标签云
  • 统计数据:统计代码
  • 微信公众号:扫描二维码,关注我们