在钛合金应用程序中获得不同的仿真器和设备的结果

Question

我正在开发用于钛合金的移动应用程序来下订单。 在我的应用程序中，我必须显示以前的订单历史记录，一个文本框用于编写订单，一个按钮用于发送订单。为此我做了以下的代码 XML文件

<Alloy>
  <Window class="container" id="win">
        <View id="TextOrders">
           <ScrollView id="scrollView" showVerticalScrollIndicator="true" showHorizontalScrollIndicator="true">

           </ScrollView>
           <TextArea id="txtTextOrder"></TextArea>
            <Button id="btnSend" onClick="SendTextOrder">Send</Button>
      </View>
    </Window>
</Alloy>

js文件

var args = arguments[0] || {};
var win = Ti.UI.createWindow({
  backgroundColor:'white'
});

var TextOrders = Ti.UI.createView({
  backgroundColor:'white'
});
function createRow(Request_Id,Order,Date) {
  var row = Ti.UI.createView({
    backgroundColor: 'white',
    borderColor: '#F5FFC6',
    borderWidth: 1,
    width:'80%', 
    top: 10, 
    left: 5,
    layout: 'vertical',
    height:Ti.UI.SIZE,
    shadow:{color:'#F5FFC6', offset:{width:3,height:3}},
    backgroundColor:'#F5FFC6',
    borderRadius:'5',
    viewShadowColor:'black',
    viewShadowOffset:{ width:5,height:5},
    viewShadowRadius:'5',
    opacity:'0.6'
  });
 var lblRequest_Id = Ti.UI.createLabel({
    text: "OrderId : "+Request_Id,
    top: 10, 
    left: '5',
    width: '80%', 
    color:'#000',
  });
  var lblOrder = Ti.UI.createLabel({
    text: Order,
    top: 10, 
    left: '5',
    width: '80%', 
    color:'#000',

  });
   var lblDate = Ti.UI.createLabel({
    text: Date,
    top: 10, 
    left: '5',
    width: '80%', 
    color:'#000',
  });
  row.add(lblRequest_Id);
  row.add(lblOrder);
  row.add(lblDate);
  return row;
}
var scrollView = Ti.UI.createScrollView({
  bottom:220,
  contentHeight: 'auto',
  layout: 'vertical',
   top:'0px',
   height:(Ti.Platform.displayCaps.platformHeight-220),
   zIndex:10,
   backgroundColor:'#F0F0F0',
});

var db = Ti.Database.open('Database\AppDb');    
try{
    var OrderDetails = db.execute('SELECT * FROM Text_Orders'); 
    while (OrderDetails.isValidRow())
    {
        var row = createRow(OrderDetails.fieldByName('Request_Id'),OrderDetails.fieldByName('Order'),OrderDetails.fieldByName('Date'));
        scrollView.add(row);
        scrollView.scrollToBottom();
        OrderDetails.next();
    }
}
catch(e){
}
finally{
    db.close(); 
}

scrollView.scrollToBottom();
$.TextOrders.add(scrollView);
win.add(TextOrders);

$.win.open();

在tss文件中

".container" : {
  backgroundColor:"white",
  backgroundImage:"/assets/Images/BackgroundImg.jpg",
}
"#TextOrders":{
    width:'100%',
    height:'100%',
    top:'0px',
}
"#scrollView":{
    borderColor:'blue',
    borderWidth:'1px',
    top:'0px',
    height:'100%',
    bottom:'120dp',
}

"#txtTextOrder":{
    width:'99%',
    height:"100dp",
    left:3,
    borderWidth:'1px',
    borderColor: '#bbb',
    backgroundColor:'#FFF',
    borderRadius: 5,
    color: '#888',
    bottom:'50dp',
    hintText:'Write your order',
    zIndex:11,
}
"#btnSend":{
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000",
    width:'99%',
    left:3,
    bottom:'0dp',
     zIndex:11,
}

我的结果是模拟器

但是当我在移动设备上安装它时我得到了结果

我的魔杖顺序视图应该从文本框中的顶部开始并在文本框上方结束。我不明白为什么会有不同的结果。

Answer 1

因为您要为scrollview设置高度和底部属性，所以只需删除scrollview的height属性并尝试...

"#scrollView":{
    borderColor:'blue',
    borderWidth:'1px',
    top:'0px',
    bottom:'120dp',
}