51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
视频课免费课排行榜短视频直播课软考学堂
全部课程软考华为认证厂商认证IT技术PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

HarmonyOS Java UI之StackLayout布局示例 原创

Tuer白晓明
发布于 2020-11-24 22:19
浏览
1收藏

HarmonyOS Java UI之StackLayout布局示例-鸿蒙开发者社区

StackLayout简介

StackLayout意为堆叠布局，用于在屏幕上保留一个区域来显示组件，实现特殊的功能。通常，堆叠布局中只应该放置一个子组件，如果存在多个子组件，则显示最新的组件。这个布局相对于其他的布局比较简单，我们不做过多的赘述。

示例

我们将使用StackLayout来显示三个Text组件，Text组件给定固定的宽高以及不同的背景色，这样便于我们来区分哪个在最上层，哪个在最下层。根据最终运行效果，我们可以看出，子组件在最后的反而在最上层，也就是后来者居上。

<?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:height="500vp"
        ohos:width="500vp"
        ohos:background_element="#CC5815"
        ohos:text="我是第一个Text."
        ohos:text_size="50"
        />

    <Text
        ohos:height="400vp"
        ohos:width="400vp"
        ohos:background_element="#07CCFF"
        ohos:text="我是第二个Text."
        ohos:text_size="50"
        />

    <Text
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:background_element="#16CCB7"
        ohos:text="我是第三个Text."
        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.

HarmonyOS Java UI之StackLayout布局示例-鸿蒙开发者社区

常用场景

我们在什么时候用堆叠布局呢？

① 对于在地图上做操作，我们就需要使用堆叠布局（也可将其理解为可以在其中放置子组件的组件）画出我们的行动轨迹，或者进行路线导航等。

② 比如短视频APP中，右侧的用户、点赞、分享等按钮都可以浮动在视频上方而不影响视频的暂停播放。

③ 我们也可以在UI页面右下角做一个固定位置的功能按钮。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
HarmonyOS
标签
鸿蒙应用开发
StackLayout
已于2020-12-12 08:37:36修改
赞 1
收藏 1
回复
举报
1
2
1
2条回复
按时间正序
/
按时间倒序
鲜橙加冰
鲜橙加冰

请继续加油哦。。。。。。。。。。。。

回复
2020-11-25 10:16:32
Tuer白晓明
Tuer白晓明 回复了 鲜橙加冰
请继续加油哦。。。。。。。。。。。。

谢谢😜 

回复
2020-11-25 10:24:58


回复
    相关推荐
    卫斯理
    LV.3
    卫斯理
    觉得TA不错？点个关注精彩不错过
    37
    帖子
    0
    视频
    226
    声望
    3
    粉丝
    最近发布
    热门推荐
    【有奖互动活动】# HarmonyOS 连接·突破# 我在现场活动​ 96回复
    #HarmonyOS连接·突破# 问题征集活动 40回复
    聊聊 2025 年最值得关注的 IT 技术趋势，一起来投票！ 13回复
    鸿蒙Flutter开发知识地图 0回复
    鸿蒙性能优化之卡顿优化 1回复
    相关问题
    HarmonyOS UI布局问题 1回答
    怎么获取动态改变stacklayout布局内部view的位置, setmargin 1回答
    HarmonyOS UI布局如何打印日志？ 2回答
    HarmonyOS UI布局水平居中问题 1回答
    Ark UI 和Java UI 可以混合开发么？ 1回答
    社区精华内容