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'
}

尝试将后退按钮（左），标题（中间）和刷新按钮（右）设置为标题视图中的水平布局和内容视图中的应用内容< / strong>并在页脚视图中进行滚动选择（即，我们可以通过在其上放置选项来使用幻灯片事件进行滚动）。如果我运行此代码，最终会将视图划分为this，并且<％>内容视图不会影响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 中没有标识为home的元素，但 index.xml 中有一个元素。< / p>

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>

这很有效。感谢Martyn。

查看钛合金TSS

3 个答案: