Titanium Android-Tableview滾動弄亂了內容

Question

我要完成的工作是實現一種2狀態（動態）的表格視圖，即具有“正常”和“編輯”模式的表格視圖。 通過按下編輯按鈕，行將切換到另一個視圖，這將幫助我對它們進行一些編輯。 再次按下按鈕，它將返回到其“正常”狀態。

實現的邏輯是，我在每個tableview行的頂部都附加了兩個不同的視圖，並分別顯示/隱藏它們。

問題是當我向上/向下滾動時，tableview行的內容混亂了，其他顯示了正常模式，其他顯示了編輯模式。 特別是，當我第一次打開窗口時，在滾動之前，我先按下編輯按鈕，然后向下滾動“正常”和“編輯”視圖，它們都顯示在一行中。 在任何情況下，滾動似乎都無法使tableview的更新正確發生。

我很確定這是一個常見問題，但是到目前為止我還沒有找到解決方案。 我附上了一個代碼示例，該代碼可以很好地描述問題。

NAVBAR_HEIGHT = 44;
TABBAR_HEIGHT = 52;
TABLEVIEW_ROW_WIDTH = 248;
TABLEVIEW_ROW_HEIGHT = 57;

FONT_NAVBAR = {fontSize:'17dp', fontWeight:'bold'};
FONT_ROW_NAME = FONT_TEXT_BOLD = {fontSize:'14dp', fontWeight:'bold'};
FONT_ROW_NUM = FONT_TEXT_NORMAL = {fontSize:'14dp', fontWeight:'normal'};
FONT_TEXT_BOLD_LARGE = {fontSize:'17dp', fontWeight:'bold'};
FONT_TEXT_NORMAL_LARGE = {fontSize:'17dp', fontWeight:'normal'};
FONT_TEXT_NORMAL_EXTRA_LARGE = {fontSize:'28dp', fontWeight:'normal'};

var tabledata = [];

var self = Ti.UI.createWindow({
    navBarHidden:true
});

var navbar = Ti.UI.createView({
    width:Ti.UI.FILL, height:NAVBAR_HEIGHT,
    top:0,
    backgroundColor:'blue'
});
var title = Ti.UI.createLabel({
    width:Ti.UI.SIZE, height:Ti.UI.SIZE,
    text:title,
    font: FONT_NAVBAR,
    color:'white'
});
var btn_edit = Ti.UI.createButton({
    width:Ti.UI.SIZE, height:Ti.UI.SIZE,
    right:10,
    title:'Edit'
});
var btn_edit_done = Ti.UI.createButton({
    width:Ti.UI.SIZE, height:Ti.UI.SIZE,
    right:10,
    title:'Edit done',
    visible: false
});

var tableview = Ti.UI.createTableView({
    width:TABLEVIEW_ROW_WIDTH,
    top:isWidescreen() ? (NAVBAR_HEIGHT+40) : (NAVBAR_HEIGHT+50), 
    bottom:isWidescreen() ? 40+TABBAR_HEIGHT : 50+TABBAR_HEIGHT,
    backgroundColor:'transparent'
});

var footer = Ti.UI.createView({
    width:Ti.UI.FILL, height:TABBAR_HEIGHT,
    bottom:0,
    backgroundColor:'blue'
});

self.addEventListener('open', function(){
    navbar.add(title);
    navbar.add(btn_edit); navbar.add(btn_edit_done);
    self.add(navbar);
    self.add(tableview);
    self.add(footer);

    populateTable();
});

btn_edit.addEventListener('click', function(){
    btn_edit.hide();
    btn_edit_done.show();
    tableview.editing = (btn_edit.type=='delete_move') ? true : false;
    tableview.moving = true;

    if (tableview.data.length != 0)
        switch_tableview_content('edit');
});

btn_edit_done.addEventListener('click', function(){
    btn_edit_done.hide();
    btn_edit.show();
    tableview.editing = false;
    tableview.moving = false;

    if (tableview.data.length != 0)
        switch_tableview_content('edit_done');
});

function switch_tableview_content(type)
{
    var rows = tableview.data[0].rows;
    //alert('elements are ' + rows.length);
    //for (var i=0; i<rows.length; i++) alert(rows[i].type+":"+rows[i].place);

    switch (type)
    {
        case 'edit':
            Ti.App.edit_mode = true;
            for (var i=0; i<rows.length; i++)
            {
                //alert('hiding: ' + rows[i].type+":"+rows[i].place);
                rows[i].content_view.hide();
                rows[i].content_view_on_edit.show();
            }
            break;
        case 'edit_done':
            Ti.App.edit_mode = false;
            for (var i=0; i<rows.length; i++)
            {
                rows[i].content_view_on_edit.hide();
                rows[i].content_view.show();
            }
            break;
        default: //do nothing
    }
}

var zonesTable = [
        {type:"Zone 1", place:"ΜΕ ΚΑΘΥΣΤΕΡΗΣΗ"},
        {type:"Zone 2", place:"ΑΜΕΣΗ"},
        {type:"Zone 3", place:"ΑΜΕΣΗ"},
        {type:"Zone 4", place:"ΑΜΕΣΗ"},
        {type:"Zone 5", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
        {type:"Zone 6", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
        {type:"Zone 7", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
        {type:"Zone 8", place:"ΑΝΙΧΝΕΥΤΗΣ IR/MW"},
        {type:"Zone 17", place:"Ραντάρ"},
        {type:"Zone 18", place:"Ραντάρ"},
        {type:"Zone 19", place:"Ραντάρ"},
        {type:"Zone 20", place:"Ραντάρ"},
        {type:"Zone 21", place:"Ραντάρ"},
        {type:"Zone 22", place:"Ραντάρ"},
        {type:"Zone 23", place:"Ραντάρ"},
        {type:"Zone 24", place:"Ραντάρ"}
];

function populateTable()
{
    tabledata = [];

    for (var i=0; i<zonesTable.length; i++)
    {
        var cur_type = zonesTable[i].type;
        var cur_place = zonesTable[i].place;

        var row = Ti.UI.createTableViewRow({
            width:TABLEVIEW_ROW_WIDTH, height:TABLEVIEW_ROW_HEIGHT,
            backgroundColor:'white',
            place:cur_place,
            type:cur_type
        });

        var content_view = Ti.UI.createView({
            width:Ti.UI.FILL, height:Ti.UI.SIZE,
            left:15, right:15
        });
        var state_icon = Ti.UI.createView({
            width:8, height:27,
            left:0,
            backgroundColor:'red'
        });
        var lbls_view = Ti.UI.createView({
            width:105, height:Ti.UI.SIZE,
            left:23,
            layout:'vertical'
        });
        var type_lbl = Ti.UI.createLabel({
            width:Ti.UI.SIZE, height:Ti.UI.SIZE,
            left:0,
            text:cur_type,
            font:FONT_TEXT_BOLD,
            color:'#414142'
        });
        var place_lbl = Ti.UI.createLabel({
            width:Ti.UI.SIZE, height:Ti.UI.SIZE,
            left:0,
            text:cur_place,
            font:FONT_TEXT_NORMAL,
            color:'#414142'
        });
        var btn_switch = Ti.UI.createButton({
            width:91, height:35,
            right:0,
            backgroundColor:'green'
        });

        lbls_view.add(type_lbl);
        lbls_view.add(place_lbl);
        content_view.add(state_icon);
        content_view.add(lbls_view);
        content_view.add(btn_switch);

        //add an invisible layer that will be shown only on editing mode
        var content_view_on_edit_outer = Ti.UI.createView({
            width:Ti.UI.FILL, height:Ti.UI.SIZE,
            touchEnabled:false,
            visible:false
        });
        var content_view_on_edit = Ti.UI.createView({
            width:Ti.UI.FILL, height:Ti.UI.SIZE,
            left:12, right:12,
            layout:'vertical'
        });

        var lbl_type_on_edit = Ti.UI.createLabel({
            width:180, height:25,
            left:5,
            text:cur_type,
            font:FONT_ROW_NAME,
            color:'#414142'
        });
        var lbl_place_on_edit = Ti.UI.createLabel({
            width:Ti.UI.SIZE, height:Ti.UI.SIZE,
            left:5,
            text:cur_place,
            font:FONT_TEXT_NORMAL,
            color:'#414142'
        });

        var btns_move = Ti.UI.createView({
            width:70, height:35,
            right:0
        });
        var btn_moveup = Ti.UI.createButton({
            width:35, height:35,
            left:0,
            backgroundColor:'#414142'
        });
        var btn_movedown = Ti.UI.createButton({
            width:35, height:35,
            right:0,
            backgroundColor:'#414142'
        });

        btns_move.add(btn_moveup);
        btns_move.add(btn_movedown);

        content_view_on_edit.add(lbl_type_on_edit);
        content_view_on_edit.add(lbl_place_on_edit);
        content_view_on_edit_outer.add(content_view_on_edit);
        content_view_on_edit_outer.add(btns_move);

        row.content_view = content_view;
        row.content_view_on_edit = content_view_on_edit_outer;
        row.add(content_view);
        row.add(content_view_on_edit_outer);

        tabledata.push(row);
    }
    tableview.setData([]);
    tableview.setData(tabledata);
}

function isWidescreen()
{
    var screenRatio = Ti.Platform.displayCaps.platformWidth / Ti.Platform.displayCaps.platformHeight;
    return ( screenRatio <= 0.57);
}

self.open();

應用程序類型：移動平台：Android Titanium SDK：3.2.3.GA Titanium Studio：內部版本3.2.3.201404181442

Answer 1

對於任何可能感興趣的人， 這里提出的解決方案對我都有很大幫助。

簡而言之，您必須在定義了contentHeight屬性的scrollview中包含tableview。 不太優雅的編碼，但可以。