StackLayout布局练习与分享 原创

鸿蒙时代
发布于 2021-3-14 12:26
浏览
0收藏

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

 

  StackLayout布局练习与分享-鸿蒙开发者社区

 

自己可以通过修改宽高设置大小来控制位置的变换,后面会有更多新的内容呈现出来,这里就简单的敲了个案例。

  

StackLayout布局练习与分享-鸿蒙开发者社区

代码如下:

<?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|right"
        ohos:text_size="24fp"
        ohos:text="第四层"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#3F56EA" />


    <Text
        ohos:id="$+id:text_light_purple"
        ohos:text_alignment="bottom|right"
        ohos:text_size="24fp"
        ohos:text="第三层"
        ohos:height="300vp"
        ohos:width="match_parent"
        ohos:background_element="#00AAEE" />
    <Text
        ohos:id="$+id:text_light_lianxi"
        ohos:text_alignment="bottom|horizontal_center"
        ohos:text_size="24fp"
        ohos:text="第二层"
        ohos:height="match_parent"
        ohos:width="150vp"
        ohos:background_element="#FF74FF8B" />


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

</StackLayout>

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
2
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
张荣超_九丘教育
张荣超_九丘教育

👍👍👍

回复
2021-3-14 21:09:18
回复
    相关推荐