SOUI官方论坛

 找回密码
 立即注册
查看: 83|回复: 0

关于线性布局extend

[复制链接]
  • TA的每日心情
    开心
    前天 10:33
  • 签到天数: 19 天

    [LV.4]偶尔看看III

    13

    主题

    44

    帖子

    145

    积分

    24:00金丹期

    Rank: 2

    积分
    145
    发表于 2020-10-9 11:18:42 | 显示全部楼层 |阅读模式
    要在SOUI布局中使用线性布局, 需要在布局容器窗口里指定布局类型为vbox | hbox, (vbox为垂直线性布局, hbox为水平线性布局).
    在指定布局类型后还可以为容器窗口指定gravity属性, 用来指定子窗口的默认排列模式. vbox的gravity有:left(默认), center, right, hbox有: top(默认), center, bottom.
    在线性布局中的子窗口pos属性没有意义, 一般直接指定size="width,height", width/height值: -1代表wrap_content, -2代表match_parent
    可以使用layout_gravity可以更改当前窗口的排列模式.
    使用extend="left,top,right,bottom", extend_left, extend_top, extend_right, extend_bottom来指定间距. (相当于android的margin)
    子窗口支持使用weight属性.
    看下面demo中的例子:
    1. <page title="linear layout">
    2.       <!--这里演示在SOUI中使用线性布局,在window中指定layout="vbox,hbox,linearLayout"时窗口的子窗口布局变成自动布局模式-->
    3.       <window layout="vbox" size="-1,-1" colorBkgnd="#cccccc" gravity="center">
    4.         <!--线性布局的自适应子窗口大小-->
    5.         <text>vbox + gravity + wrapContent</text>
    6.         <window size="100,30" colorBkgnd="#ff0000"/>
    7.         <window size="200,30" extend="10,5,10,5" colorBkgnd="#ff0000"/>
    8.         <window size="120,30" layout_gravity="right" colorBkgnd="#ff0000"/>
    9.       </window>

    10.       <window pos="0,[5,@-1,@200" layout="vbox" colorBkgnd="#cccccc">
    11.         <!--线性布局的weight属性-->
    12.         <text extend_bottom="10">vbox + gravity + weight</text>
    13.         <window size="100,30" colorBkgnd="#ff0000"/>
    14.         <window size="200,30" extend="10,5,10,5" colorBkgnd="#ff0000" weight="1"/>
    15.         <window size="120,30" layout_gravity="right" colorBkgnd="#ff0000" weight="1"/>
    16.         <button size="100,30" extend_top="10">button test</button>
    17.       </window>

    18.       <window pos="0,[5" layout="vbox" colorBkgnd="#cccccc" id="10000">
    19.         <text extend_bottom="10" layout_gravity="center">hbox demo</text>
    20.         <window size="-1,-1" layout="hbox" colorBkgnd="#888888">
    21.           <!--线性布局之hbox-->
    22.           <button size="100,30">button1</button>
    23.           <button size="100,30" extend_left="10">button2</button>
    24.           <button size="100,30" extend_left="10">button3</button>
    25.           <button size="100,30" extend_left="10">button4</button>
    26.         </window>
    27.       </window>
    28.     </page>
    复制代码

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|SOUI官方论坛 ( 粤ICP备18103663号-2 )

    GMT+8, 2020-10-29 16:00

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表