在 Tabrisjs 中将多个 TextView 添加到 CollectionView

Question

我可以轻松地将 Widget 添加到 CollectionView，但我似乎无法添加超过一种 Widget 类型。我正在尝试添加 2 个 TextView。到目前为止，这是我得到的结果，它仅输出 firstName 两次。（这在 Playground 中运行）

另外，是否可以为每个TextView添加事件？像： .on('tap', () => {

我确实看到 .on('select', 在 Collection View 上是如何工作的，但我想将事件添加到每个单独的 TextView

谢谢。

// Create a collection view, initialize its cells and fill it with items
const {CollectionView, Composite, ImageView, TextView, ui} = require('tabris');

let people = [
  ['Bob', 'Smith',],
  ['Fred', 'Jones'],
  ['James', 'Mackay'],
].map(([firstName, lastName]) => ({firstName, lastName}));

new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  itemCount: people.length,
  cellHeight: 56,

  createCell: () => {
    let cell = new Composite();

    new TextView({
      left: 30, top: 10,
      alignment: 'left'
    })
    .appendTo(cell);

    let txvLastName = new TextView({
      left: 50, top: 25,
      alignment: 'right'
    })
    .appendTo(cell);
    return cell;
  },
  updateCell: (cell, index) => {
    let person = people[index];
    cell.apply({
      TextView: {text: person.firstName},
      txvLastName: {text: person.lastName},
    });
  }
}).on('select', ({index}) => console.log('selected', people[index].firstName))
  .appendTo(ui.contentView);

Answer 1

apply 方法采用 Widget 选择器，其工作方式类似于 CSS 选择器，并在上述 link 中进行了说明。您正在引用 JavaScript 变量，该变量不受支持且不在 updateCell 回调函数的范围内。

我会更新您的 createCell 回调，以便每个元素都有一个独特的 class 并在您的 updateCell 回调中引用它：

createCell: () => {
  let cell = new Composite();

  new TextView({
    left: 30, top: 10,
    class: 'firstName',
    alignment: 'left'
  }).appendTo(cell);

  new TextView({
    left: 50, top: 25,
    class: 'lastName',
    alignment: 'right'
  }).appendTo(cell);
  return cell;
},
updateCell: (cell, index) => {
  let person = people[index];
  cell.apply({
    '.firstName': {text: person.firstName},
    '.lastName': {text: person.lastName},
  });
}

在 Tabrisjs 中将多个 TextView 添加到 CollectionView

Adding Multiple TextView's to CollectionView in Tabrisjs

android

tabris

tabris-js