Список Titanium 7.4.0 Раздел с проблемой перекрытия

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

В следующий раз, пожалуйста, опубликуйте код вместо вывода 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 писать не нужно. Это единица измерения по умолчанию, если вы не удалили / не изменили ее в своем 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();