Titanium：当布局=垂直时隐藏视图

Question

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

假设我们有这个：

<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 只是将视图设置为不可见，但它仍然占据其空间。因此，在垂直布局中，其他视图不会重新排列以填补空白（这是正确的，即使不需要）。

解决这个问题的sn-p如下：

/**
 * 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;
}

可以在控制器的代码中简单地实现：

hideVertical($.sometimes_visible);

gist

Answer 2

另一种选择就是：

$.view.height = 0;

它完全符合您的要求，而无需从树中删除视图。