Question

我有一个使用layout: 'horizontal'的窗口，当我添加子视图时，每个都使用width: '50%'，这很棒，它们都像2列表一样填充。

但是，我意识到我需要滚动内容，所以我在窗口中添加了一个scrollview，并将我的子视图添加到了scrollview中 - 但它没有用。当我在滚动视图上使用layout: 'horizontal'时，它会尝试使内容水平滚动 - 其中所有子视图都在一行上（在UI上只能看到前两个）。如果我将其更改为layout: 'vertical'，它会正确滚动，但视图以1列格式排列（一个在另一个上面）

var deals_window = Titanium.UI.createWindow({
    title: 'Deals',
    layout: 'horizontal'
  });

  var scrollView = Ti.UI.createScrollView({
    showVerticalScrollIndicator: true,
    layout: 'horizontal',
    scrollType: 'vertical',
    contentWidth: '100%',
    contentHeight: 'auto',
    width: '100%',
    height: 'auto'

  });
  deals_window.add(scrollView);

如何让scrollView在垂直滚动时使用'水平'布局行为？？

Answer 1

不要使用水平布局。试试这个：

var scrollView = Ti.UI.createScrollView({
   layout: 'vertical',
   height: Ti.UI.FILL
});

var row = Ti.UI.createView({
   height: Ti.UI.SIZE
});

var view1 = Ti.UI.createView({
    width: "50%",
    left: 0
});

var view2 = Ti.UI.createView({
    width: "50%",
    right: 0
});

row.add(view1);
row.add(view2);

scrollView.add(row);

Answer 2

Try to use the property horizontalWrap:true of scrollView. It may help you!

Here is code:

//window
var win = Ti.UI.createWindow({
    width: '100%',
    height: '100%',
    backgroundColor: 'white'
});
//scrollView
var scrollView = Ti.UI.createScrollView({}i
    top: 0,
    width: '100%',
    height: '100%',
    contentWidth: '100%',
    layout: 'horizontal',
    horizontalWrap: true,
    scrollType: 'vertical'
);
win.add(scrollView);
//item in scrollView
for(var i = 0; i < 8; i++){
    var itemLabel = Ti.UI.createLabel({
        font:{
            fontSize: '18'
        },
        left: '2.5%',
        width: '30%',
        color: 'black',
        height: '90'
        borderRadius: 5,
        textAlign: 'center',
        text: 'item '+(i+1),
        backgroundColor: 'red',
        verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER
    });
    scrollView.add(itemLabel);
}

Well, in this way it really work, however, there's a problem with scrollView when it can scroll the part of the last row will be covered. So, I do not recommend you apply this way to solve your problem. You can try more better UI Component like TableView or ListView, for TableView just put any numbers of the item you want in TableViewRow, and for ListView just defined a ItemTemplate which contains several items you want. If you need more details, just write email to me: frankjorsn@gmail.com

在ScrollView中布置视图，无法独立控制布局和滚动方向

2 个答案: