SDK 6.2.0及后续版本ItemTemplate高度自适应问题求助

我之前在升级到Titanium SDK 6.2.0之后也遇到过一模一样的问题——原本靠Ti.UI.SIZE就能让列表单元格自动适配内容高度，结果更新后直接占满了整个屏幕高度，跟Ti.UI.FILL的效果没区别。折腾了一阵后，总结出几个靠谱的解决办法：

方法一：显式设置ListView的defaultItemHeight #

SDK 6.2.0之后，ListView默认会把未指定高度的单元格拉伸到屏幕高度，所以我们可以先给列表设置一个合理的最小高度，再让内容撑开单元格：

• 在ListView的配置里添加defaultItemHeight，比如设置为40（根据你的内容最小高度调整）：

  const listView = Ti.UI.createListView({
      defaultItemHeight: 40,
      templates: {
          'default': yourItemTemplate
      },
      defaultTemplate: 'default'
  });
  

• 确保ItemTemplate的根视图设置height: Ti.UI.SIZE，内部的文本、图片等元素也用Ti.UI.SIZE来适配自身内容，这样单元格会在defaultItemHeight的基础上，根据内容自动增高。

方法二：启用ListView的autoHeight属性 #

SDK 6.2.0及后续版本新增了autoHeight属性，专门用来解决自动适配单元格高度的问题：

• 在ListView配置中开启autoHeight: true，这个属性会让列表自动计算每个单元格的内容高度：

  const listView = Ti.UI.createListView({
      autoHeight: true,
      templates: {
          'default': yourItemTemplate
      },
      defaultTemplate: 'default'
  });
  

• 保持ItemTemplate根视图的height: Ti.UI.SIZE，不需要额外设置defaultItemHeight，列表会自动根据内容调整每个单元格的高度。

方法三：手动计算内容高度（兜底方案） #

如果上面两种方法都不生效，可以手动计算内容所需高度，再赋值给单元格：

• 以文本内容为例，我们可以创建一个临时标签来估算高度（要和ItemTemplate里的字体、宽度保持一致）：

  function calculateTextHeight(text, width, font) {
      const tempLabel = Ti.UI.createLabel({
          text: text,
          width: width,
          font: font,
          height: Ti.UI.SIZE
      });
      // 触发尺寸计算
      tempLabel.measure(0, 0, width, Ti.UI.FILL);
      return tempLabel.size.height;
  }
  
  // 生成列表数据时，给每个项设置计算后的高度
  const listData = yourDataSource.map(item => {
      const contentHeight = calculateTextHeight(item.content, Ti.UI.FILL, { fontSize: 14 });
      return {
          properties: { height: contentHeight + 10 }, // 加上内边距的高度
          // 其他数据字段
          content: item.content
      };
  });
  

• 把计算出的高度赋值给列表项的properties.height，这样单元格就会精准适配内容高度。

额外注意事项 #

• 检查ItemTemplate的嵌套视图，确保没有任何子视图设置了height: Ti.UI.FILL，这会导致父视图被强制拉伸。
• 如果你用Alloy框架，要注意XML布局里的属性，不要在<ListView>或<ItemTemplate>中意外设置height="fill"。

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