Appcelerator：使用子视图百分比高度，父不填充

Question

我有一个自定义iOS页眉和页脚60dp和40dp高度分别。在我称之为身体的其余区域中，我添加了5个子视图，每个子视图具有20％的高度和不同的非白色背景色。最后一个子视图之后和页脚之上会出现白色的空白。使用1个100％高度的子视图或2个子视图，每个高度为50％，没有差距。所以我认为这是由四舍五入造成的。我该如何解决这个问题并继续使用百分比？

Answer 1

我遇到了这个问题，以及创造一个问题： https://jira.appcelerator.org/browse/TIMOB-19900

Answer 2

一种不同的方法是不使用显式高度。相反，将元素放置在基于特定百分比的顶部和底部之间。因此，如果您有5个视图，请将第一个视为top: '0%', bottom: '80%'。 （即应相当于top: '0%', height: '20%'，但有明显的舍入误差，不是......）接下来在top: '20%', bottom: '60%'。继续放置最后3个视图。他们会出现在另一个之上。 （由于舍入误差会相互抵消，你不会有任何空隙。）

下面是这个动作的例子：

var win = Ti.UI.createWindow({ 
    backgroundColor: 'red' 
}); 

win.add(/*header*/Ti.UI.createView({ 
    top: 0, 
    height: 60, 
    backgroundColor: 'green' 
})); 

var content = Ti.UI.createView({ 
    top: 60, bottom: 40, 
    height: Ti.UI.FILL 
}); 
var childCount = 5; 
for(var i = 0; i < childCount; i++) { 
    content.add(Ti.UI.createLabel({ 
     text: 'Child ' + (i + 1), 
     width: Ti.UI.FILL, 
     top: (20 * i) + '%', // 0%, 20%, 40%, 60%, 80% 
     bottom: (20 * (childCount - 1 - i)) + '%', // 80%, 60%, 40%, 20%, 0% 
     backgroundColor: 'gray' 
    })); 
} 
win.add(content); 

win.add(/*footer*/Ti.UI.createView({ 
    bottom: 0, 
    height: 40, 
    backgroundColor: 'blue' 
})); 

win.open();