Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

修改当控件为浮动状态时,不占位,无需估算位置 #8

Closed
wants to merge 4 commits into from
Closed

Conversation

smallevilbeast
Copy link
Contributor

浮动使用方法

  1. 将要设置为浮动状态的控件放到当前父节点下的最后位置
  2. 设置float="true"开启浮动状态
  3. 使用halign和valign来控制在父容器中的浮动位置, 如在右下角显示 halign="right" valign="bottom"

@nmgwddj
Copy link
Collaborator

nmgwddj commented Apr 18, 2019

在使用你上面提供的 XML 配置放到一个容器中后,是可以正常显示这个 Label 控件的。并且不根据父容器的布局要求进行排列(属于一个自由控件),如果想控制这个控件的位置,可以使用 margin 属性来设置四周的边距。参考如下 XML 配置:

<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" caption="0,0,0,35">
  <VBox bkcolor="bk_wnd_darkcolor">
    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">
      <Control />
      <Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0"/>
      <Box width="21" margin="4,6,0,0">
        <Button class="btn_wnd_max" name="maxbtn"/>
        <Button class="btn_wnd_restore" name="restorebtn" visible="false"/>
      </Box>
      <Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>
    </HBox>
    <Box>
      <VBox margin="0,0,0,0" height="150" bkcolor="lightcolor" valign="center" halign="center">
        <Label name="test_label" text="helloworld" float="true" normaltextcolor="black" width="80" height="30" margin="100,20"/>
      </VBox>
    </Box>
  </VBox>
</Window>

最终效果

2019-04-18_10-39-13

不建议使用 float 属性

如需要浮动效果,父容器使用 Box 容器替代,在 Box 容器中的控件是没有垂直或者水平布局特性的,控件会重叠统一显示在左上角的位置。同样可以通过设置 margin 来设置绝对位置。当然也可以通过 valign 和 halign 来设置对齐方式,比如你希望控件在右下角显示,则可以像如下设置:

<?xml version="1.0" encoding="UTF-8"?>
<Window size="400,320" caption="0,0,0,35">
  <VBox bkcolor="bk_wnd_darkcolor">
    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">
      <Control />
      <Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0"/>
      <Box width="21" margin="4,6,0,0">
        <Button class="btn_wnd_max" name="maxbtn"/>
        <Button class="btn_wnd_restore" name="restorebtn" visible="false"/>
      </Box>
      <Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>
    </HBox>
    <Box>
      <Control width="auto" valign="bottom" halign="right" height="auto" 
               bkimage="../public/animation/ani_loading_ex.gif"/>
    </Box>
  </VBox>
</Window>

效果

2019-04-18_10-44-04

如果你希望居中显示,可以修改 valign 和 halign 均为 center。最终效果:

2019-04-18_10-46-26

所以最终结论是:

  • 如果你希望使用 float,请保证控件在一个容器内,设置固定宽高度后用 margin 来控制其绝对位置
  • 建议使用 Box 父容器的方式来替代 flaot 属性,让布局更可控。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants