钛中的TSS视图

Question

嗨，这是一个新的钛和无法得到如何创造一个流体设计与其TSS。如何放置三个视图，一个作为标题(20%)，两个作为内容保持(60%)和三个作为页脚(20%)与所有宽度满(Ti.UI.FILL)。我的代码是，

index.xml

<Alloy>
   <Window class="container">
       <Require src="home" id="home"></Require>
   </Window>
</Alloy>

home.xml

<Alloy>
    <View id="header"></View>
    <View id="content"></View>
    <View id="footer"></View>
</Alloy>

home.tss

"#home": {
    layout: 'vertical',
    width: Ti.UI.FILL,
    height: Ti.UI.FILL,
    backgroundColor: '#000'
},
'#header':{
    layout: 'horizontal',
    height: '20%',
    width: Ti.UI.FILL,
    backgroundColor: '#fff'
},
'#content': {
    layout: 'vertical',
    height: '60%',
    width: Ti.UI.FILL,
    backgroundColor: '#ccc'
},
'#footer': {
    layout: 'horizontal',
    height: '20%',
    width: Ti.UI.FILL,
    backgroundColor: '#fff'
}

正在尝试的是将后退按钮(左)、标题(中间)和刷新按钮(右)放置在标头视图和content视图中的app内容中，以及在页脚视图中放置滚动选项(即，我们可以通过在其上放置选项来滚动使用幻灯片事件)。如果我运行这段代码，视图最终会被划分为类似于这，而60%不受内容视图的影响。我在appcelerator论坛上问过，还没有得到答复。希望这能有所帮助。

Answer 1

您的id为“home”的对象实际上不是视图，它只是对home类的引用，因此不能这样将样式属性化。

我会像这样帮助home.xml：

<Alloy>
    <View id="homeHolder">
        <View id="header"></View>
        <View id="content"></View>
        <View id="footer"></View>
    </View>
</Alloy>

然后它就会像你预期的那样起作用

"#homeHolder": {
    layout: 'vertical',
    width: Ti.UI.FILL,
    height: Ti.UI.FILL,
    backgroundColor: '#000'
}

Answer 2

把这个：

"#home": {
    layout: 'vertical',
    width: Ti.UI.FILL,
    height: Ti.UI.FILL,
    backgroundColor: '#000'
},

在index.tss中，home.xml中没有id home的元素，但是在index.xml中有一个元素。

Answer 3

home.xml

<Alloy>
<View id="home">
    <View id="header" visible="true">
        <Label>header</Label>
    </View>
    <ScrollView id="content" visible="true">
        <Label>content</Label>
    </ScrollView>
    <View id="footer" visible="true">
        <Label>footer</Label>
    </View>
</View>
</Alloy>

home.tss

"#home": {
layout: 'vertical',
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor: '#000'
},
'#header':{
    layout: 'horizontal',
    height: '20%',
    width: Ti.UI.FILL,
    backgroundColor: 'white',
},
'#content': {
    layout: 'vertical',
    height: '60%',
    width: Ti.UI.FILL,
    backgroundColor: '#ccc'
},    
'#footer': {
    layout: 'horizontal',
    height: '20%',
    width: Ti.UI.FILL,
    backgroundColor: 'green',
}

index.xml

<Alloy>
<Window class="container">
    <Require src="home" id="home"></Require>
</Window>
</Alloy>

这个很管用。多亏了马丁。