android - Appcelerator Titanium - 为什么我的按钮不显示？

Question

在 Titanium 中，我有以下代码：

var dbWindow = Ti.UI.currentWindow;

var Cloud = require('ti.cloud');

var data = [];

var rowid;
var rowindex;
var table;

var db;

/**
 * Creates TableView from database
 */
function makeTable() {
    db = Ti.Database.open('myDb');

    try {
        var rows = db.execute('SELECT * from boatData');
        var boatName;
        var rowLabel;

        while (rows.isValidRow()) {
            tableRow = Ti.UI.createTableViewRow({
                backgroundSelectedColor : 'red',
                rowid : rows.fieldByName('id'),
                loa : rows.fieldByName('loa'),
                lwl : rows.fieldByName('lwl'),
                beam : rows.fieldByName('beam'),
                displacement : rows.fieldByName('displacement'),
                sailArea : rows.fieldByName('sailArea')
            });
            boatName = rows.fieldByName('boatName');
            rowLabel = Ti.UI.createLabel({
                text : boatName,
                color : 'black',
                font : {
                    fontSize : 22
                },
                touchEnabled : false
            });
            tableRow.add(rowLabel);
            tableRow.Label = rowLabel;
            data.push(tableRow);
            rows.next();
        }
        rows.close();
        db.close();

        table = Titanium.UI.createTableView({
            data : data,
            backgroundColor : 'pink',
            headerTitle : 'Boats',
            height : '75%',
            allowsSelection : true
        });

    } catch (e) {//database table not found
         db.close();
         var alertWindow = Titanium.UI.createAlertDialog({
             message : 'No data found!  Please save data first',
             buttonNames : ['OK']
         });

         alertWindow.addEventListener('click', function(e) {
             dbWindow.close();
         });

         alertWindow.show();
    }
}

makeTable();

table.addEventListener('click', function(e) {
    rowid = e.rowData.rowid;
    rowindex = e.index;
    Ti.App.loaBox.value = e.rowData.loa;
    Ti.App.lwlBox.value = e.rowData.lwl;
    Ti.App.beamBox.value = e.rowData.beam;
    Ti.App.displacementBox.value = e.rowData.displacement;
    Ti.App.saBox.value = e.rowData.sailArea;
    openButton.title = 'Get Data';
    selected.text = 'Your selection: ' + e.row.Label.text;
    deleteButton.visible = true;
});

var parentView = Titanium.UI.createView({
    width : '100%',
    height : '100%',
    layout : 'vertical'
});

parentView.add(table);

var selectionView = Ti.UI.createView({
    top : 5,
    height : '10%',
    layout : 'vertical'
});

var info = Ti.UI.createLabel({
    text : 'Click on a boat name to get data or delete.',
    color : 'black',
    font : {
        fontSize : 25
    }
});

var selected = Ti.UI.createLabel({
    color : 'red',
    font : {
        fontSize : 25
    }
});

selectionView.add(info);
selectionView.add(selected);

parentView.add(selectionView);

var buttons = Ti.UI.createView({
    top : 5,
    layout : 'horizontal'
});

var lowerButtons = Ti.UI.createView({
    top : 5,
    layout : 'horizontal'
});

var openButton = Ti.UI.createButton({
    backgroundColor : 'pink',
    borderColor : 'red',
    borderWidth : 2,
    font : {
        fontSize : 22
    },
    title : 'Back',
    right : 5
});

openButton.addEventListener('click', function(e) {
    dbWindow.close();
});

var deleteButton = Ti.UI.createButton({
    backgroundColor : 'pink',
    borderColor : 'red',
    borderWidth : 2,
    font : {
        fontSize : 22
    },
    title : 'Delete',
    left : 5
});

deleteButton.visible = false;

deleteButton.addEventListener('click', function(e) {
    var db = Ti.Database.open('myDb');
    db.execute('DELETE FROM boatData WHERE id=' + rowid);
    db.close();
    table.deleteRow(rowindex);
    Ti.App.loaBox.value = '';
    Ti.App.lwlBox.value = '';
    Ti.App.beamBox.value = '';
    Ti.App.displacementBox.value = '';
    Ti.App.saBox.value = '';

    deleteButton.visible = false;
    openButton.title = 'Back';
    selected.text = '';
});


var saveToCloudButton = Ti.UI.createButton({
    backgroundColor : 'pink',
    borderColor : 'red',
    borderWidth : 2,
    font : {
        fontSize : 22
    },
    title : 'Save boats to cloud',
    left : 5
});

saveToCloudButton.addEventListener('click', function(e) {
    saveToCloud();
});

buttons.add(openButton);
buttons.add(deleteButton);
lowerButtons.add(saveToCloudButton);

parentView.add(buttons);
parentView.add(lowerButtons);
dbWindow.add(parentView);

/**
 * Saves database to cloud
 */
function saveToCloud() {
    var dbName = 'myDb';
    var dbPath;
    var dbFile;

    if (Ti.Platform.osname == 'android') {
        dbPath = 'file:///data/data/' + Ti.App.getID() + '/databases/';
        dbFile = Ti.Filesystem.getFile(dbPath + dbName);
    } else {
        dbPath = Ti.Filesystem.applicationSupportDirectory + '/database/';
        dbFile = Ti.Filesystem.getFile( dbPath + dbName + '.sql' );
    }

    Cloud.Users.secureLogin({
        title : 'Sign In'
    }, function(e) {
        if (e.success) {
            Cloud.Files.create({
                name : dbName,
                file : dbFile
            }, function(e) {
                if (e.success) {
                    var file = e.files[0];
                    alert('Boats successfully backed up to cloud!');
                } else {
                    alert('Error:\n' + ((e.error && e.message) || JSON.stringify(e)));
            }

            });
        } else {
             alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
        }
    });
}

但是，由于某种奇怪的原因，我saveToCloudButton的没有出现。我尝试手动设置可见性，但没有奏效。有谁知道我做错了什么？

编辑：添加了完整的代码。

Answer 1

使两个视图的顶部不同

var buttons = Ti.UI.createView({
    top : 5,
    layout : 'horizontal'
});

var lowerButtons = Ti.UI.createView({
    top : 60,
    layout : 'horizontal'
});

谢谢

Answer 2

我发现了我的问题。我需要将高度值设置为buttons和lowerButtons。