Titanium 7.4.0 listSection 有重叠问题

Question

I am new to developing a hybrid application. I am using titanium Js and have created a view. Inside that have lists and sections. I am facing an issue with list items are overlapping to each other. I have attached the screenshot below. Please check the below code in JSON format.

{
  "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 }

List Section Code:

{
  "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
  }

Actual Code:

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);

Please help le to find out the solution.

Screenshot for the above problem:

Answer 1

Next time please post some code instead of the JSON output. Have a look at this example

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();

It will set the height to 3 different values (fixed and variable with Ti.UI.SIZE )

In your example it looks like the label height is not correct. So just set that to Ti.UI.SIZE . And you don't need to write dip . It is the default unit unless you removed/changed that in your tiapp.xml

Then Ti 7.4.0 is from 2018. You won't be able to make store updates with this version. You should update to the latest (9.0.1.GA) or at least to 8.3.x!

Update with the parts of your code

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();