javascript - 如何将图像网格添加到 Titanium 中的 ScrollView

Question

我正在尝试将两个图像的行添加到 Titanium 中的 ScrollView。我遇到了一个问题，因为只显示了一行。

我的合金代码如下所示:

<Alloy>	
	<Window class='container' statusBarStyle='Ti.UI.iPhone.StatusBar.LIGHT_CONTENT'>
		// Make ios status bar correct color
		<View height='20' top='0' left='0' backgroundColor='#01B6AC'></View>
		<View id = 'savedContents' layout='vertical' top='20'>
		</View>
		<Require type='view' src='bottomBar' id='bottomBar'/>
		<Widget id="fa" src="com.mattmcfarland.fontawesome"/>
	</Window>	
</Alloy>

我的 Controller 代码如下所示:

var scrollView = Ti.UI.createScrollView({
  contentWidth: 'auto',
  contentHeight: 'height',
  showVerticalScrollIndicator: false,
  showHorizontalScrollIndicator: false,
  width: '100%',
  height: 400,
  top: 0
});

for  (i=0; i < venueDetails.length; i++) {
  row = Ti.UI.createView({
    width:'100%',
    height:150,
    layout:'composite'
  });	

  image1 = Ti.UI.createImageView({
    image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[i]["image1"],
    width:'50%',
    height:150,
    left:0,
    top:0
  });

  row.add(image1);
  if (i+1 < venueDetails.length) {	
    image2 = Ti.UI.createImageView({
      image:'http://www.outnow.io/assets/img/small511by309/'+venueDetails[i+1]["image1"],
      width:'50%',
      height:150,
      left:'50%',
      top:0
    });
    row.add(image2);	
  }
  //$.savedContents.add(row);	
  scrollView.add(row);			
}
$.savedContents.add(scrollView);

如果我将行 View 直接添加到 $.savedContents View (按照上面代码中注释掉的行)，我会正确地看到所有行(每行两个图像)。如果我通过 createScrollView 执行此操作，我只会得到一行图像。我需要使用 scrollView 使图像可滚动。

有人知道我做错了什么吗？

Answer 1

默认情况下，布局属性的值为 composite。因此 scrollView 具有复合布局，因此您需要为该 View (row) 指定定位属性或“引脚”(顶部、底部、左侧、右侧和中心)。在您的代码中，您只指定了宽度和高度，因此所有 View 都将在父 View (ScrollView) 中居中。

根据 Titanium.UI.View-property-layout Reference :

composite (or absolute). Default layout. A child view is positioned based on its positioning properties or "pins" (top, bottom, left, right and center). If no positioning properties are specified, the child is centered.