Flutter教程

ion-reorder-group

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4排序组件ion-reorder-group对项目进行布局。

ion-reorder-group官方文档地址:https://ionicframework.com/docs/api/reorder-group

The reorder group is a wrapper component for items using the ion-reorder component. See the Reorder documentation for further information about the anchor component that is used to drag items within the ion-reorder-group.

Once the user drags an item and drops it in a new position, the ionItemReorder event is dispatched. A handler for it should be implemented that calls the complete() method.

The detail property of the ionItemReorder event includes all of the relevant information about the reorder operation, including the from and to indexes. In the context of reordering, an item moves from an index to a new index.

ion-reorder-group　用法(Usage) 


<ion-reorder-group (ionItemReorder)="doReorder($event)" disabled="false">
  
  <ion-item>
    <ion-label>
      Item 1
    ion-label>
    <ion-reorder slot="end">ion-reorder>
  ion-item>

  <ion-item>
    <ion-label>
      Item 2
    ion-label>
    <ion-reorder slot="end">ion-reorder>
  ion-item>

  
  <ion-item>
    <ion-reorder slot="start">ion-reorder>
    <ion-label>
      Item 3
    ion-label>
  ion-item>

  <ion-item>
    <ion-reorder slot="start">ion-reorder>
    <ion-label>
      Item 4
    ion-label>
  ion-item>

  
  <ion-item>
    <ion-label>
      Item 5
    ion-label>
    <ion-reorder slot="end">
      <ion-icon name="pizza">ion-icon>
    ion-reorder>
  ion-item>

  <ion-item>
    <ion-label>
      Item 6
    ion-label>
    <ion-reorder slot="end">
      <ion-icon name="pizza">ion-icon>
    ion-reorder>
  ion-item>

  
  <ion-reorder>
    <ion-item>
      <ion-label>
        Item 7
      ion-label>
    ion-item>
  ion-reorder>

  <ion-reorder>
    <ion-item>
      <ion-label>
        Item 8
      ion-label>
    ion-item>
  ion-reorder>
ion-reorder-group>
import { Component, ViewChild } from '@angular/core';
import { IonReorderGroup } from '@ionic/angular';

@Component({
  selector: 'reorder-group-example',
  templateUrl: 'reorder-group-example.html',
  styleUrls: ['./reorder-group-example.css']
})
export class ReorderGroupExample {
  @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;

  constructor() {}

  doReorder(ev: any) => {
    // The `from` and `to` properties contain the index of the item
    // when the drag started and ended, respectively
    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);

    // Finish the reorder and position the item in the DOM based on
    // where the gesture ended. This method can also be called directly
    // by the reorder group
    ev.detail.complete();
  });

  toggleReorderGroup() {
    this.reorderGroup.disabled = !this.reorderGroup.disabled;
  }
}

Updating Data 

import { Component, ViewChild } from '@angular/core';
import { IonReorderGroup } from '@ionic/angular';

@Component({
  selector: 'reorder-group-example',
  templateUrl: 'reorder-group-example.html',
  styleUrls: ['./reorder-group-example.css']
})
export class ReorderGroupExample {
  items = [1, 2, 3, 4, 5];

  @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;

  constructor() {}

  doReorder(ev: any) => {
    // Before complete is called with the items they will remain in the
    // order before the drag
    console.log('Before complete', this.items);

    // Finish the reorder and position the item in the DOM based on
    // where the gesture ended. Update the items variable to the
    // new order of items
    this.items = ev.detail.complete(this.items);

    // After complete is called the items will be in the new order
    console.log('After complete', this.items);
  });
}

<ion-reorder-group disabled="false">
  
  <ion-item>
    <ion-label>
      Item 1
    ion-label>
    <ion-reorder slot="end">ion-reorder>
  ion-item>

  <ion-item>
    <ion-label>
      Item 2
    ion-label>
    <ion-reorder slot="end">ion-reorder>
  ion-item>

  
  <ion-item>
    <ion-reorder slot="start">ion-reorder>
    <ion-label>
      Item 3
    ion-label>
  ion-item>

  <ion-item>
    <ion-reorder slot="start">ion-reorder>
    <ion-label>
      Item 4
    ion-label>
  ion-item>

  
  <ion-item>
    <ion-label>
      Item 5
    ion-label>
    <ion-reorder slot="end">
      <ion-icon name="pizza">ion-icon>
    ion-reorder>
  ion-item>

  <ion-item>
    <ion-label>
      Item 6
    ion-label>
    <ion-reorder slot="end">
      <ion-icon name="pizza">ion-icon>
    ion-reorder>
  ion-item>

  
  <ion-reorder>
    <ion-item>
      <ion-label>
        Item 7
      ion-label>
    ion-item>
  ion-reorder>

  <ion-reorder>
    <ion-item>
      <ion-label>
        Item 8
      ion-label>
    ion-item>
  ion-reorder>
ion-reorder-group>
const reorderGroup = document.querySelector('ion-reorder-group');

reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
  // The `from` and `to` properties contain the index of the item
  // when the drag started and ended, respectively
  console.log('Dragged from index', detail.from, 'to', detail.to);

  // Finish the reorder and position the item in the DOM based on
  // where the gesture ended. This method can also be called directly
  // by the reorder group
  detail.complete();
});

Updating Data 

const items = [1, 2, 3, 4, 5];
const reorderGroup = document.querySelector('ion-reorder-group');

reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
  // Before complete is called with the items they will remain in the
  // order before the drag
  console.log('Before complete', items);

  // Finish the reorder and position the item in the DOM based on
  // where the gesture ended. Update the items variable to the
  // new order of items
  items = detail.complete(items);

  // After complete is called the items will be in the new order
  console.log('After complete', items);
});
import React from 'react';

import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react';

function doReorder(event: CustomEvent) {
  // The `from` and `to` properties contain the index of the item
  // when the drag started and ended, respectively
  console.log('Dragged from index', event.detail.from, 'to', event.detail.to);

  // Finish the reorder and position the item in the DOM based on
  // where the gesture ended. This method can also be called directly
  // by the reorder group
  event.detail.complete();
}

const Example: React.SFC<{}> = () => (
  <>
    {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
    <IonReorderGroup disabled={false} onIonItemReorder={doReorder}>
      {/*-- Default reorder icon, end aligned items --*/}
      <IonItem>
        <IonLabel>
          Item 1
        IonLabel>
        <IonReorder slot="end">IonReorder>
      IonItem>

      <IonItem>
        <IonLabel>
          Item 2
        IonLabel>
        <IonReorder slot="end">IonReorder>
      IonItem>

      {/*-- Default reorder icon, start aligned items --*/}
      <IonItem>
        <IonReorder slot="start">IonReorder>
        <IonLabel>
          Item 3
        IonLabel>
      IonItem>

      <IonItem>
        <IonReorder slot="start">IonReorder>
        <IonLabel>
          Item 4
        IonLabel>
      IonItem>

      {/*-- Custom reorder icon end items --*/}
      <IonItem>
        <IonLabel>
          Item 5
        IonLabel>
        <IonReorder slot="end">
          <IonIcon name="pizza">IonIcon>
        IonReorder>
      IonItem>

      <IonItem>
        <IonLabel>
          Item 6
        IonLabel>
        <IonReorder slot="end">
          <IonIcon name="pizza">IonIcon>
        IonReorder>
      IonItem>

      {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
      <IonReorder>
        <IonItem>
          <IonLabel>
            Item 7
          IonLabel>
        IonItem>
      IonReorder>

      <IonReorder>
        <IonItem>
          <IonLabel>
            Item 8
          IonLabel>
        IonItem>
      IonReorder>
    IonReorderGroup>
  >
  }
);

export default Example

Updating Data 

const items = [1, 2, 3, 4, 5];

function doReorder(event: CustomEvent) {
  // Before complete is called with the items they will remain in the
  // order before the drag
  console.log('Before complete', this.items);

  // Finish the reorder and position the item in the DOM based on
  // where the gesture ended. Update the items variable to the
  // new order of items
  this.items = event.detail.complete(this.items);

  // After complete is called the items will be in the new order
  console.log('After complete', this.items);
}
<template>
  
  <ion-reorder-group @ionItemReorder="doReorder($event)" disabled="false">
    
    <ion-item>
      <ion-label>
        Item 1
      ion-label>
      <ion-reorder slot="end">ion-reorder>
    ion-item>

    <ion-item>
      <ion-label>
        Item 2
      ion-label>
      <ion-reorder slot="end">ion-reorder>
    ion-item>

    
    <ion-item>
      <ion-reorder slot="start">ion-reorder>
      <ion-label>
        Item 3
      ion-label>
    ion-item>

    <ion-item>
      <ion-reorder slot="start">ion-reorder>
      <ion-label>
        Item 4
      ion-label>
    ion-item>

    
    <ion-item>
      <ion-label>
        Item 5
      ion-label>
      <ion-reorder slot="end">
        <ion-icon name