iOS平台Appcelerator TableViewSection顶部默认边距移除方法咨询

问题场景 #

使用Titanium Appcelerator开发iOS应用，通过TableView的行（TableViewRow）和分区（TableViewSection）实现粘性头部效果，但Section顶部出现了不该存在的白色边距，需移除该边距。

现有代码片段 #

TableViewRow 代码

var mainView = Ti.UI.createTableViewRow({
        height: Ti.UI.SIZE,
        width: "100%",
        backgroundSelectedColor: 'transparent',
        backgroundSelectedColor: 'transparent',
        selectedColor: 'transparent',
        bottom: 0,
});

添加TableViewSections 代码

tableData.push(Ti.UI.createTableViewSection({
        headerView: require("addStickyHeader").addStickyHeader(letra.toUpperCase()),
}));

addStickyHeader 函数代码

exports.addStickyHeader = function(text) {

var viewHeader = Ti.UI.createView({
    height : Ti.App.screenSize[0] * 0.08,
    width : "100%",
    backgroundColor : require("colors").fundo(),
    top : -100
});

viewHeader.add(Ti.UI.createLabel({
    text : text.toUpperCase(),
    color : require("colors").branco(),
    width : "84.6%",
    font : {
        fontSize : Ti.App.screenSize[0] * 0.019,
        fontFamily : require("fonts").semiBold()
    },
}));

return viewHeader;
};

修复方案 #

1. 移除自定义HeaderView的负top偏移 #

addStickyHeader函数中给viewHeader设置的top: -100会触发系统自动补充边距抵消负偏移，直接删除该属性：

var viewHeader = Ti.UI.createView({
    height : Ti.App.screenSize[0] * 0.08,
    width : "100%",
    backgroundColor : require("colors").fundo()
    // 移除 top: -100
});

2. 关闭TableView默认Section头部间距 #

iOS的TableView默认会给Section头部预留空白，创建TableView时显式设置sectionHeaderHeight: 0，让系统默认头部高度为0，只展示自定义headerView：

var tableView = Ti.UI.createTableView({
    // 你的其他TableView属性
    sectionHeaderHeight: 0
});

3. 清理TableViewRow冗余代码并确认布局 #

清理mainView中重复的backgroundSelectedColor设置，同时确保Row无额外内边距，按需指定布局方式：

var mainView = Ti.UI.createTableViewRow({
    height: Ti.UI.SIZE,
    width: "100%",
    backgroundSelectedColor: 'transparent',
    selectedColor: 'transparent',
    bottom: 0,
    layout: 'vertical' // 按需添加，避免自动产生间距
});

4. 强制设置Section的headerHeight #

若以上步骤未解决问题，给TableViewSection添加headerHeight: 0，强制覆盖系统默认值：

tableData.push(Ti.UI.createTableViewSection({
        headerView: require("addStickyHeader").addStickyHeader(letra.toUpperCase()),
        headerHeight: 0
}));

按上述步骤修改后，即可消除Section顶部的未知白色边距，核心是避免自定义HeaderView的负偏移，并关闭TableView和Section的默认头部间距。

内容的提问来源于stack exchange，提问作者Manuel Rodrigues