钛合金滚动视图问题

Question

我有一个表格，里面有10个带评级栏的问题。我需要在同一页上显示10个问题。这些问题不适合屏幕，所以我需要垂直滚动，并且应该能够在同一页面中查看10个问题。我尝试了很多方法，但都不起作用。请帮我垂直滚动视图？

视图

<Alloy>
    <Window id="questionnaireWin" title="questionnaire" platform="android,ios">
        <View id="header">
              <Label id="title">questions form</Label>
        </View>
         <ScrollView showHorizontalScrollIndicator="true" id="Scroll" layout="vertical">
        <View class="questionsContainer">
            <View class="row">
                <Label class="question">1. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR1"  max='5' initialRating='2.5'></Require>
            </View>
            <View class="row">
                <Label class="question">2. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf </Label>
                <Require type="widget" src="starrating" class="starRating" id="starR2"  max='5' initialRating='3'></Require>
            </View>
            <View class="row">
                <Label class="question">3. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR3"  max='5' initialRating='2'></Require>
            </View>
            <View class="row">
                <Label class="question">4. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR4"  max='5' initialRating='3.5'></Require>
            </View>
            <View class="row">
                <Label class="question">5. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf </Label>
                <Require type="widget" src="starrating" class="starRating" id="starR5"  max='5' initialRating='2.5'></Require>
            </View>
            <View class="row">
                <Label class="question">6. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR6"  max='5' initialRating='3'></Require>
            </View>
            <View class="row">
                <Label class="question">7. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR7"  max='5' initialRating='2'></Require>
            </View>
            <View class="row">
                <Label class="question">8. HThis ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf? </Label>
                <Require type="widget" src="starrating" class="starRating" id="starR8"  max='5' initialRating='3.5'></Require>
            </View>
            <View class="row">
                <Label class="question">9. This ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf </Label>
                <Require type="widget" src="starrating" class="starRating" id="starR9"  max='5' initialRating='2'></Require>
            </View>
            <View class="row">
                <Label class="question">10. vThis ifdsfhsdfkdlsf fjklads fjagfhad fha kasd fk fadkf adsfk asdf adsk fads fadhsfk adshf kadsf hhdasf hadk fhadks fhhads kfhhad sf</Label>
                <Require type="widget" src="starrating" class="starRating" id="starR10"  max='5' initialRating='3.5'></Require>
            </View>
            <View class="row">
                <Button class="processRating">Procees</Button>
            </View>
        </View>
         </ScrollView>
    </Window>
</Alloy>

上述视图的样式代码如下，

"#questionnaireWin": {
    layout: 'vertical',
    fullscreen: false,
    navBarHidden: true
}
"#header": {
    top: 0,
    height: "50dp",
    width: Ti.UI.FILL,
    backgroundGradient: {
        type: "linear",
        startPoint: { x: "0%", y:"0%"},
        endPoint:   { x: "0%", y:"100%"},
        colors: [
            { color: "#4F94CD", offset: 0.0 },
            { color: "#4F94CD", offset: 1.0 }
        ]
    }
}
"#title": {
    align: "center",
    color: "#fff",
    font: {
        fontSize: '21dp',
        fontWeight: 'bold'
    }
}
".questionsContainer":{
    height:Ti.UI.FILL,
    width:Ti.UI.FILL,
    layout:'vertical',
    backgroundColor:"#f39c12"
}
'.row':{
    height:'20%',
    width:'100%',
    backgroundColor:'#bdc3c7',
    layout:'vertical'
}
".question":{
    font:{
        fontSize:18,
        fontWeight:'normal'
    },
    color:"#000",
    left:10,
    height:'50%'
}
".starRating":{
    height:'50%',
    left:10
}
".processRating":{
    height:45,
    width:'90%',
    backgroundColor:'#3498db',
    color:'#fff'
}

Answer 1

这个很有趣。您有10行，但每行都是问题Container大小的"20%"。这意味着只有足够的空间让5在屏幕上显示。

'.row':{
    // height:'20%', // <--- Change this to something else that isn't 20%
    height: "200dp",
    width:'100%',
    backgroundColor:'#bdc3c7',
    layout:'vertical'
}

如果这还不能帮你解决问题，请告诉我。在偶然发现之前，我还做了4-5次其他修改。