如何添加删除按钮并使其在nativescript中工作

1 回答

• 1

  第一个问题（只显示X）是由于ListView项目只需要一（1）个子项 . 你有两个（标签和按钮） . 幸运的是，一个项目可能是一个，所以你要做的是将两个元素包含在StackLayout中，如下所示：

  <Page loaded="onPageLoaded">
  <GridLayout rows="auto, *">
      <StackLayout orientation="horizontal" row="0">
          <TextField width="200" text="{{ task }}" hint="Enter a task" id="task" />
          <Button cssClass="test" text="Add" tap="add"></Button>
          <Button cssClass="test" text="Refresh" tap="refresh"></Button>
      </StackLayout>
      <ListView items="{{ tasks }}" row="1">
          <ListView.itemTemplate>
              <StackLayout orientation="horizontal">
                  <Label text="{{ name }}" />
                  <Label text="{{ hello }}" />
                  <Button cssClass="test" text="X" tap="delbutton"></Button>
              </StackLayout>
          </ListView.itemTemplate>
      </ListView>
  </GridLayout>
  </Page>
  

  至于从ListView中删除项目的第二部分 . 我不知道你的 pageData 是否是observable object，因为声明不是粘贴代码的一部分，但是我创建了一个如何使用observables填充数据的例子（这是构建ui：s的NativeScript方法，见前面的链接）以及如何从ListView中删除项目 .

  我在代码中添加了注释来解释我在做什么 .

  var Observable = require('data/observable');
  var ObservableArray = require('data/observable-array');
  
  /**
   * Creating an observable object,
   * see documentation: https://docs.nativescript.org/bindings.html
   * 
   * Populate that observable object with an (empty) observable array.
   * This way we can modify the array (e.g. remove an item) and 
   * the UI will reflect those changes (and remove if from the ui
   * as well).
   * 
   * Observable objects are one of NativeScripts most fundamental parts
   * for building user interfaces as they will allow us to
   * change an object and that change gets propagated to the ui
   * without us doing anything.
   *
   */
  
  var contextArr = new ObservableArray.ObservableArray();
  var contextObj = new Observable.Observable({
      tasks: contextArr
  });
  
  
  exports.onPageLoaded = function(args) {
      var page = args.object;
      page.bindingContext = contextObj;
      /**
       * Simulating adding data to array after http request has returned json.
       * Also adding an ID to each item so that we can refer to that when we're
       * removing it.
       */
      contextArr.push({name: 'First Item', id: contextArr.length});
      contextArr.push({name: 'Second Item', id: contextArr.length});
      contextArr.push({name: 'Third Item', id: contextArr.length});
  };
  
  exports.delbutton = function(args) {
      /**
       * Getting the "bindingContext" of the tapped item.
       * The bindingContext will contain e.g: {name: 'First Item', id: 0}
       */
      var btn = args.object;
      var tappedItemData = btn.bindingContext;
  
      /**
       * Iterate through our array and if the tapped item id
       * is the same as the id of the id of the current iteration
       * then remove it.
       */
      contextArr.some(function (item, index) {
          if(item.id === tappedItemData.id) {
              contextArr.splice(index, 1);
              return false;
          }
      });
  
  };
  

  回复于 2024-05-21T12:53:41+08:00