android - 钛:布局=垂直时隐藏 View

Question

Titanium UI 中的一个常见问题是将 View 隐藏在垂直布局中。

假设我们有这个:

<Alloy>
  <View id="wrapper" layout="vertical">
    <Label id="sometimes_visible" top="20" height="50">I can be visible o not</Label>
    <Label id="always_visible" top="20" height="50">I'm always visible</Label>
  </View>
</Alloy>

而你，出于某种原因，需要隐藏 sometimes_visible 标签:

$.sometimes_visible.visible = false;

也许您期望的结果是:

_______________________________
|   ________________________   |
|   |  I'm always visible  |   |
|   ------------------------   |
|______________________________|

相反，您将获得:

_______________________________
|                              |
|                              |
|                              |
|   ________________________   |
|   |  I'm always visible  |   |
|   ------------------------   |
|______________________________|

(always_visible 标签上方不需要的空间)

Answer 1

发生这种情况是因为在 Titanium 中，visible=false 只是将 View 设置为不可见，但它仍然占据了它的空间。因此，在垂直布局中，其他 View 不会重新排列以填补空白(这是正确的，即使不需要)。

解决这个问题的代码 fragment 如下:

/**
 * hides a view nested into a layout=vertical container
 * acts on top, bottom and height to simulate html-style display:none
 * @param  {Ti.View} view the view to be hidden
 */
function hideVertical(view) {
    //store previous values
    view.__originalValues = {
        top: view.top,
        bottom: view.bottom,
        height: view.height
    };

    //set new values to simulate invisibility
    view.top = 0;
    view.bottom = 0;
    view.height = 0;
    view.visible = false;
}

/**
 * shows a view nested into a layout=vertical container
 * restore from hideVertical()
 * @param  {Ti.View} view the view to be shown
 */
function showVertical(view) {
    //restore previous values
    view = _.extend(view, view.__originalValues || {});

    view.visible = true;
}

它可以通过简单的方式在 Controller 的代码中实现:

hideVertical($.sometimes_visible);

gist