Question

我想要实现的是实现一个2状态（动态）tableview，即一个具有＆＃34; normal＆＃34;和＃34;编辑＆＃34;模式。按下编辑按钮，行将变为另一个视图，这将帮助我对它们进行一些编辑。再次按下按钮，它将返回到正常状态＆＃34;状态。

我的实现逻辑是我在每个tableview行的顶部附加了2个不同的视图，我分别显示/隐藏它们。

问题在于，当我向上/向下滚动时，表格视图行内容混乱，其他人显示正常模式，其他人则显示编辑模式。特别是，当我第一次打开窗口时，在任何滚动之前，我按下编辑按钮，然后向下滚动＆＃34; normal＆＃34;和＆＃34;编辑＆＃34;视图显示在一行中。在任何情况下，滚动似乎都不会让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：build 3.2.3.201404181442

Answer 1

对于任何可能感兴趣的人，建议的解决方案here对我帮助很大。

简而言之，您必须在滚动视图中包含tableview，其中定义了contentHeight属性。不太优雅的编码，但它的工作原理。

Titanium Android - Tableview滚动会让内容变得混乱

1 个答案: