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

請幫助 le 找出解決方案。

上述問題的截圖：

Answer 1

下次請發布一些代碼，而不是 JSON output。 看看這個例子

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固定和可變）

在您的示例中，看起來 label 高度不正確。 所以只需將其設置為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();