2

嗨，我是钛新手，不知道如何使用其 TSS 创建流体设计。如何放置三个视图，一个作为页眉（20%），两个作为内容持有者（60%），三个作为页脚（20%），全宽（Ti.UI.FILL）。我的代码是，

索引.xml

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

主页.xml

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

主页.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'
}

我正在尝试将后退按钮（左）、标题（中）和刷新按钮（右）作为水平布局放置在标题视图中，并将应用程序内容放置在内容视图和页脚视图中，并通过滚动进行一些选择（即，我们可以通过在其上放置选项来使用幻灯片事件滚动）。如果我运行此代码，视图最终会像这样划分，并且 60% 不会影响内容视图。我已经在 appcelerator 论坛中询问过，并没有得到答复。希望这可以帮助。

4

3 回答 3

2

您的 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'
}
于 2013-09-30T16:27:34.423 回答
1

把这个：

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

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

于 2013-09-30T15:00:02.160 回答
1

主页.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>

主页.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',
}

索引.xml

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

这行得通。感谢马丁。

于 2013-10-01T06:20:09.223 回答