IOS7风格的内联选择器与钛

Question

有没有人在 Titanium 中实现了 IOS7 风格的内联选择器？如有任何提示或演示，我将不胜感激。

例如在日历中：http://i.stack.imgur.com/hUDZK.png

这是我当前的代码：

var HintTextArea = require('hinttextarea');

var self = Ti.UI.createWindow({
    backButtonTitle: '',    
    title: L('addwish_title'),  
    backgroundColor: 'white',
    layout: 'vertical',
});

var title = Ti.UI.createTextField({
    hintText: L('addwish_title'),
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE,
    color: 'black',
    top: 10, bottom: 10, left: 40,
    width: 270, 
    height: Ti.UI.SIZE,
    suppressReturn: true            
});
var rowTitle = Ti.UI.createTableViewRow({touchEnabled: false}); 
rowTitle.add(title);

var category = Ti.UI.createLabel({
    text: L('addwish_category'),
    touchEnabled: false,
    color: 'black',
    top: 10, bottom: 10, left: 40,
    width: 270, 
    height: Ti.UI.SIZE  
}); 
var rowCategory = Ti.UI.createTableViewRow({}); 
rowCategory.add(category);

var categoryPicker = Ti.UI.createPicker({
    //visible: false,
    selectionIndicator: true,
    //height: 0
});
var data = [];
data[0]=Ti.UI.createPickerRow({title:'Bananas'});
data[1]=Ti.UI.createPickerRow({title:'Strawberries'});
data[2]=Ti.UI.createPickerRow({title:'Mangos'});
data[3]=Ti.UI.createPickerRow({title:'Grapes'});
data[4]=Ti.UI.createPickerRow({title:'Bananas'});
data[5]=Ti.UI.createPickerRow({title:'Strawberries'});
data[6]=Ti.UI.createPickerRow({title:'Mangos'});
data[7]=Ti.UI.createPickerRow({title:'Grapes'});

categoryPicker.add(data);   

categoryPicker.setSelectedRow(0, 3);

var rowPicker = Ti.UI.createTableViewRow({touchEnabled: false});    
rowPicker.add(categoryPicker);  

var description = HintTextArea.createTextArea({
    color: 'black',
    font: {fontSize: 16},
    top: 10, left: 39,
    height: 180,
    width: 272,
    suppressReturn: true
}); 
var rowDescription = Ti.UI.createTableViewRow({touchEnabled: false});   
rowDescription.add(description);    

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

var addWishButton = Ti.UI.createButton({
    title: L('addwish_add_button'),
    height: 20,
    top: 10,
    bottom: 5
});
footerView.add(addWishButton);  

// now add the complete tableview form
var tableView = Ti.UI.createTableView({
  data: [rowTitle, rowCategory, rowDescription],
  footerView : footerView,
  allowsSelection: false
});
self.add(tableView);


// *** EVENTS

category.addEventListener('click', function(e) {
    Ti.API.debug('category event');
    // check if the picker is already visible
    tableView.insertRowAfter(1, rowPicker);

});

self.open();

Answer 1

问题是您将事件侦听器添加到具有属性touchEnabled 设置为false 的标签视图。改成：

var category = Ti.UI.createLabel({
    text: L('addwish_category'),
    color: 'black',
    top: 10, bottom: 10, left: 40,
    width: 270,
    height: Ti.UI.SIZE
});

还有事件监听器：

// *** EVENTS
var pickerEnabled = false;
category.addEventListener('singletap', function(e) {
    Ti.API.debug('category event');
    // check if the picker is already visible
    if (pickerEnabled) {
        tableView.deleteRow(rowPicker);
        pickerEnabled = false;
    } else {
        tableView.insertRowAfter(1, rowPicker);
        pickerEnabled = true;
    }
});

TableView 中标签上的click 事件存在一些问题，但singletap 工作正常。

我还添加了简单的if 语句，这将阻止向表中添加第二个选择器。