Titanium - 单击该行时,将覆盖我的TableViewRow颜色的内容

时间:2012-09-17 19:58:33

标签: events styles titanium tableview appcelerator

我正在开发Titanium并为iOS开发我创建了一个TableView,每行都有一个按钮,当你点击该行时,另一个按钮被添加到该行,如果再次单击该按钮,则删除该按钮,每个控件有自己的行为和自己的风格。我正在处理的问题是,当我点击行时,按钮上的样式被覆盖,我的意思是,如果任何按钮具有特定的背景颜色,则所述颜色将被覆盖并替换为row的backgroundColor,也会出现字体颜色。

这是该行在点击之前的外观截图:

enter image description here

下一个是当我点击该行并添加另一个按钮时:

enter image description here

查看小灰色按钮背景颜色如何更改为与行背景颜色相同的颜色。当我单击该行使消失按钮并再次单击该行以使其重新出现时,也会发生同样的情况:

enter image description here

这是我定义行和按钮的方式:

function addToDo(title, priority, taskId){
    var that = {};

    var row = Ti.UI.createTableViewRow({
        height:80, 
        value : taskId,
        backgroundSelectedColor : 'transparent',
        selectedBackgroundColor : 'transparent',
        selectedColor : 'transparent',
        item_type : 'ROW'
    });

    that.currentPriority = priority;

    that.resolveColor = function(tmpPriority){
        switch(tmpPriority){

            case 0: backgroundColorPriority = "#da362a"; break;
            case 1: backgroundColorPriority = "#da6c2a"; break;
            case 2: backgroundColorPriority = "#da962a"; break;
            case 3: backgroundColorPriority = "#dacb2a"; break;             
        }
        return backgroundColorPriority;
    }

    var rowLayout = Ti.UI.createView({
        backgroundColor : 'transparent'
    });

    var checkbox = Ti.UI.createButton({
        top: 25,
        left: 5,
        width: 30,
        height: 30,
        borderColor: 'white',
        borderWidth: 2,
        borderRadius: 1,
        backgroundColor: '#b1b1b1',
        backgroundImage: 'NONE',
        item_type : 'CHECKBOX',
        value: false //value is a custom property in this case here.
    });

    row.add(checkbox);

    //Attach some simple on/off actions
    checkbox.on = function(item) {
        this.backgroundColor = '#62b425';
        item.backgroundColor = "#101010";
        this.value = true;
    };

    checkbox.off = function(item) {
        this.backgroundColor = '#b1b1b1';
        item.backgroundColor = that.resolveColor(item.currentPriority);
        this.value = false;
    };

    // Create a Label.
    var todoTitleLabel = Ti.UI.createLabel({
        text : title,
        color : 'white',
        font : {fontSize:11},
        left : 40,
        top : 35,
        textAlign : 'center'
    });

    // Add to the parent view.
    row.add(todoTitleLabel);

    // Create a Button.
    var deleteTask = Ti.UI.createButton({
        title : 'Borrar',
        height : 50,
        width : 100,
        top : 85,
        left : 110,
        item_type : 'DELETEBUTTON',
        style : Ti.UI.iPhone.SystemButtonStyle.PLAIN,
        color : '#000',
        backgroundSelectedColor : '#F7F8E0',
        selectedColor : '#F7F8E0',
        backgroundColor : '#F7F8E0'
    });

    // Add to the parent view.
    row.expand = function(){
        this.height=160;
        row.add(deleteTask);            
    };

    row.contract = function(){
        this.height=80;
        row.remove(deleteTask);

    };

    var backgroundColorPriority = that.resolveColor(that.currentPriority);      
    row.backgroundColor = backgroundColorPriority;
    that.currentRow = row;

    checkbox.container = that.currentRow;

    return that;
}

这就是我处理行上点击事件的方式:

table.addEventListener('click', function(e){
    if(e.source.item_type == 'CHECKBOX'){
        if(false == e.source.value) {
            e.source.on(e.source.container);
        } else {
            e.source.off(e.source.container);   
        }
    }else if(e.source.item_type == 'DELETEBUTTON'){
        alert('delete button');
    }else if(e.source.item_type == 'ROW'){
        if(!borraState){
            Ti.API.info('IN ' + JSON.stringify(e));
            taskId = e.row.value;
            todoId = tasks[taskId].todoId;
            index = e.index;
            borraLayout.animate(borrarLayoutIn);
            e.source.expand();
            borraState = true;
        }else{
            Ti.API.info('OUT ' + JSON.stringify(e));
            borraLayout.animate(borrarLayoutOut);
            borraState = false;
            e.source.contract();
        }
    }
});

我不明白为什么在单击行时会覆盖颜色,即使我在处理事件时尝试重新定义背景颜色,但无济于事。我做错了什么?

2 个答案:

答案 0 :(得分:2)

我通过将下一个属性添加到我的表视图行

来解决这个问题
selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE

该属性使得点击/按下/点击行等时不会显示颜色或效果。

答案 1 :(得分:0)

注意:

不推荐使用Titanium.UI.iPhone.TableViewCellSelectionStyle

使用Titanium.UI.iOS.TableViewCellSelectionStyle代替