立即注册
查看: 499|回复: 0

[鸿蒙OS技术分享] HarmonyOS Java UI框架常用布局开发指导(三):StackLayout

已绑定手机
发表于 2021-10-20 10:17:48 | 显示全部楼层 |阅读模式 来自 广东省深圳市
Stacklayout直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左上角,第一个添加到布局中的视图显示在最底层,最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。
1.jpg

1、支持的XML属性
StackLayout无自有的XML属性,共有XML属性继承自:Component
StackLayout所包含组件可支持的XML属性见下表:
属性名称中文描述取值取值说明使用案例
layout_alignment对齐方式left表示左对齐。可以设置取值项如表中所列,也可以使用“|”进行多项组合。
ohos:layout_alignment="top"
ohos:layout_alignment="top|left"
top表示顶部对齐。
right表示右对齐。
bottom表示底部对齐。
horizontal_center表示水平居中对齐。
vertical_center表示垂直居中对齐。
center表示居中对齐。

1.创建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">
</StackLayout>
2.使用默认布局添加组件
StackLayout中组件的布局默认在区域的左上角,并且以后创建的组件会在上层。
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>
3.使用相对位置添加组件
使用layout_alignment属性可以指定组件在StackLayout中的相对位置,如下表示Button组件位于StackLayout的右面。
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">

   <Button
        ohos:id="$+id:button"
        ohos:height="40vp"
        ohos:width="80vp"
        ohos:layout_alignment="right"
        ohos:background_element="#3399FF"/>
</StackLayout>

2、场景展示
点击将子视图从底层移到顶层显示
2.jpg
Java示例代码:
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);
    }
});
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

合作/建议

TEL: 19168984579

工作时间:
周一到周五 9:00-11:30 13:30-19:30
  • 扫一扫关注公众号
  • 扫一扫打开小程序
Copyright © 2013-2024 一牛网 版权所有 All Rights Reserved. 帮助中心|隐私声明|联系我们|手机版|粤ICP备13053961号|营业执照|EDI证
在本版发帖搜索
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表