Titanium 7.4.0 listSection 存在重叠问题

Question

我是开发混合应用程序的新手。我正在使用钛 Js 并创建了一个视图。里面有列表和部分。我面临列表项相互重叠的问题。我附上了下面的截图。请检查以下 JSON 格式的代码。

{
  "caseInsensitiveSearch": true,
  "separatorColor": "#C8C7CC",
  "defaultItemTemplate": "listDefaultTemplate",
  "canScroll": true,
  "sectionCount": 0,
  "sections": [],
  "hiddenBehavior": 4,
  "enabled": true,
  "visible": true,
  "touchEnabled": true,
  "bottom": "55dip",
  "top": "65dip",
  "backgroundRepeat": false,
  "keepScreenOn": false,
  "children": [],
  "size": {
  "x": 0,
  "width": 0,
  "y": 0,
  "height": 0
  },
  "rect": {
  "width": 0,
  "x": 0,
  "y": 0,
  "height": 0
  },
  "apiName": "Ti.UI.ListView",
  "bubbleParent": true,
  "soundEffectsEnabled": true,
  "horizontalWrap": true }

列表部分代码：

{
  "headerTitle": "Distance Units",
  "footerTitle": null,
  "items": [
  {
    "template": null,
    "properties": {
        "itemId": 1,
        "color": "#000000",
        "left": "7dip",
        "accessoryType": 0,
        "title": "Feet",
        "font": {
            "fontSize": "16dip"
        },
        "height": "55dip"
    }
  },
  ........
  ........
  ........
  ],
  "footerView": null,
  "headerView": null,
  "keepScreenOn": false,
  "children": [],
  "size": {
    "x": 0,
    "width": 0,
    "y": 0,
    "height": 0
  },
  "rect": {
    "width": 0,
    "x": 0,
    "y": 0,
    "height": 0
   },
  "apiName": "Ti.UI.ListSection",
  "bubbleParent": true
  }

实际代码：

var toolUnitsSubview = Ti.UI.createView({
    bottom: "-1dp",
    top: "-1dp",
    right: "-244dip",
    width: "244dip",
    backgroundColor: '#EFEFF4',
    zIndex: 501,
    borderColor: '#CCCCCC',
    borderSize: 1
});

this.unitsList = Ti.UI.createListView({
    canScroll: true,
    top: "65dp"
    bottom: "55dp",
    separatorColor: '#C8C7CC',
});

this.distanceUnitsSection = Ti.UI.createListSection({
    headerTitle: "Distance Units"
});

this.distanceUnits = [
    {
        title: 'Feet',
        itemId: 1,
        template:Ti.UI.LIST_ITEM_TEMPLATE_SETTINGS,
        properties: {
            title: title,
            accessoryType: 0,
            itemId: itemId,
            color: '#000000',
            font: {
                fontSize: 16
            },
            height: 50,
            left: 7
        }
    },
    ....
    ....
    ....
];

this.distanceUnitsSection.setItems(this.distanceUnits); 

this.unitsList.setSections([
    this.distanceUnitsSection,
]);

toolUnitsSubview.add(this.unitsList);

请大家帮忙找出解决方法。

上述问题的截图：

Answer 1

下次请 post 一些代码而不是 JSON 输出。看看这个例子

var win = Ti.UI.createWindow({backgroundColor: 'white'});

var myTemplate = {
    childTemplates: [{
            type: 'Ti.UI.Label',
            bindId: 'info',
            properties: {
                color: 'black',
                font: { fontFamily:'Arial', fontSize: 20, fontWeight:'bold' },
                left: 60, top: 0,
            }
        }]
};

var listView = Ti.UI.createListView({
    templates: { 'template': myTemplate },
    defaultItemTemplate: 'template'
});
var sections = [];

var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
var fruitDataSet = [
    { info: {text: 'Apple'}, properties: {height: 100,backgroundColor:"#f00"}},
    { info: {text: 'Banana'}, properties: {height: 50}},
    { info: {text: 'test'}, properties: {height: Ti.UI.SIZE,backgroundColor:"#f00"}}
];
fruitSection.setItems(fruitDataSet);
sections.push(fruitSection);
listView.setSections(sections);
win.add(listView);
win.open();

它将高度设置为 3 个不同的值（固定和可变 Ti.UI.SIZE）

在您的示例中，标签高度似乎不正确。所以只需将其设置为 Ti.UI.SIZE。而且你不需要写dip。它是默认单位，除非您 removed/changed 在 tiapp.xml

那么 Ti 7.4.0 是 2018 年的！您将无法使用此版本进行商店更新。您应该更新到最新的 (9.0.1.GA) 或至少更新到 8.3.x!

更新部分代码

var win = Ti.UI.createWindow({backgroundColor: 'white'});

var myTemplate = {
    childTemplates: [{
            type: 'Ti.UI.Label',
            bindId: 'info',
            properties: {
                color: 'black',
                font: { fontFamily:'Arial', fontSize: 20, fontWeight:'bold' },
                left: 60, top: 0,
            }
        }]
};

var toolUnitsSubview = Ti.UI.createView({
    backgroundColor: '#EFEFF4',
    borderColor: '#CCCCCC',
    borderSize: 1
});

var listView = Ti.UI.createListView({
    templates: { 'template': myTemplate },
    defaultItemTemplate: 'template',
    canScroll: true,
    top: 65,
    bottom: 55,
    separatorColor: '#C8C7CC',
});
var sections = [];
var itemId = 0;
var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
var fruitDataSet = [
    { info: {text: 'test'}, properties: {accessoryType: 0,itemId: itemId,color: '#000000',font: {fontSize: 16},height: 50,left: 7}},
    { info: {text: 'test'}, properties: {accessoryType: 0,itemId: itemId,color: '#000000',font: {fontSize: 16},height: 50,left: 7}},
    { info: {text: 'test'}, properties: {accessoryType: 0,itemId: itemId,color: '#000000',font: {fontSize: 16},height: 50,left: 7}},
    { info: {text: 'test'}, properties: {accessoryType: 0,itemId: itemId,color: '#000000',font: {fontSize: 16},height: 50,left: 7}}
];
fruitSection.setItems(fruitDataSet);
sections.push(fruitSection);
listView.setSections(sections);
toolUnitsSubview.add(listView);
win.add(toolUnitsSubview);
win.open();

Titanium 7.4.0 listSection 存在重叠问题

Titanium 7.4.0 listSection having overlapping issue

android

titanium

titanium-mobile

android-studio

appcelerator-titanium