Flutter可重排序列表插件reorderable_items_view的使用

Flutter可重排序列表插件reorderable_items_view的使用

pub package

Info

此插件主要基于 ReorderableListView 编写。它结合了 <a href="https://api.flutter.dev/flutter/material/ReorderableListView-class.html">ReorderableListView</a> 和 <a href="https://pub.dev/packages/flutter_staggered_grid_view">flutter_staggered_grid_view</a>，以实现交错GridView的可拖拽功能。

Usage

要使用此插件，在你的 pubspec.yaml 文件中添加 reorderableitemsview 作为依赖项。

dependencies:
  reorderableitemsview: ^版本号

Example Staggered GridView

以下是一个交错GridView的示例：

import 'package:flutter/material.dart';
import 'package:reorderableitemsview/reorderableitemsview.dart';

class GridPageView extends StatefulWidget {
  @override
  _GridPageViewState createState() => _GridPageViewState();
}

class _GridPageViewState extends State<GridPageView> {

  List<StaggeredTileExtended> _listStaggeredTileExtended = [
    StaggeredTileExtended.count(2, 2),
    StaggeredTileExtended.count(2, 1),
    StaggeredTileExtended.count(1, 2),
    StaggeredTileExtended.count(1, 1),
    StaggeredTileExtended.count(2, 2),
    StaggeredTileExtended.count(1, 2),
    StaggeredTileExtended.count(1, 1),
    StaggeredTileExtended.count(3, 1),
    StaggeredTileExtended.count(1, 1),
    StaggeredTileExtended.count(4, 1),
  ];

  List<Widget> _tiles = [
    _Example01Tile(Key("a"),Colors.green, Icons.widgets),
    _Example01Tile(Key("b"),Colors.lightBlue, Icons.wifi),
    _Example01Tile(Key("c"),Colors.amber, Icons.panorama_wide_angle),
    _Example01Tile(Key("d"),Colors.brown, Icons.map),
    _Example01Tile(Key("e"),Colors.deepOrange, Icons.send),
    _Example01Tile(Key("f"),Colors.indigo, Icons.airline_seat_flat),
    _Example01Tile(Key("g"),Colors.red, Icons.bluetooth),
    _Example01Tile(Key("h"),Colors.pink, Icons.battery_alert),
    _Example01Tile(Key("i"),Colors.purple, Icons.desktop_windows),
    _Example01Tile(Key("j"),Colors.blue, Icons.radio),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("交错GridView Demo"),
      ),
      body: ReorderableItemsView(
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            _tiles.insert(newIndex, _tiles.removeAt(oldIndex));
          });
        },
        children: _tiles,
        crossAxisCount: 4,
        isGrid: true,
        staggeredTiles: _listStaggeredTileExtended,
        longPressToDrag: false,
      ),
    );
  }
}

class _Example01Tile extends StatelessWidget {
  _Example01Tile(Key key, this.backgroundColor, this.iconData): super(key: key);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: backgroundColor,
      child: new InkWell(
        onTap: () {},
        child: new Center(
          child: new Padding(
            padding: EdgeInsets.all(4.0),
            child: new Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

Example ListView

以下是一个普通ListView的示例：

import 'package:flutter/material.dart';
import 'package:reorderableitemsview/reorderableitemsview.dart';

class ListPageView extends StatefulWidget {
  @override
  _ListPageViewState createState() => _ListPageViewState();
}

class _ListPageViewState extends State<ListPageView> {

  List<Widget> _tiles = [
    _Example01Tile(Key("a"),Colors.green, Icons.widgets),
    _Example01Tile(Key("b"),Colors.lightBlue, Icons.wifi),
    _Example01Tile(Key("c"),Colors.amber, Icons.panorama_wide_angle),
    _Example01Tile(Key("d"),Colors.brown, Icons.map),
    _Example01Tile(Key("e"),Colors.deepOrange, Icons.send),
    _Example01Tile(Key("f"),Colors.indigo, Icons.airline_seat_flat),
    _Example01Tile(Key("g"),Colors.red, Icons.bluetooth),
    _Example01Tile(Key("h"),Colors.pink, Icons.battery_alert),
    _Example01Tile(Key("i"),Colors.purple, Icons.desktop_windows),
    _Example01Tile(Key("j"),Colors.blue, Icons.radio),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView Demo"),
      ),
      body: ReorderableItemsView(
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            _tiles.insert(newIndex, _tiles.removeAt(oldIndex));
          });
        },
        feedBackWidgetBuilder: (context, index, child) {
          return Container(
            child: child,
          );
        },
        children: _tiles,
        longPressToDrag: false,
      ),
    );
  }
}

class _Example01Tile extends StatelessWidget {
  _Example01Tile(Key key, this.backgroundColor, this.iconData): super(key: key);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: backgroundColor,
      child: new InkWell(
        onTap: () {},
        child: new Center(
          child: new Padding(
            padding: EdgeInsets.all(4.0),
            child: new Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

Options

以下是 ReorderableItemsView 的参数选项：

[@required](/user/required) this.children, // List<Widget>
[@required](/user/required) this.onReorder, // Callback onReorder(int oldIndex, int newIndex)
this.scrollController, // ScrollController
this.scrollDirection = Axis.vertical, // Axis Ignored in GridView
this.padding, 
this.staggeredTiles, // Only used in GridView, check gridview example above
this.crossAxisCount = 3, // Only used in GridView
this.isGrid = false, // if true renders as gridview
this.reverse = false,
this.longPressToDrag = true,
this.mainAxisSpacing = 0.0, // Only used in GridView
this.crossAxisSpacing = 0.0, // Only used in GridView
this.feedBackWidgetBuilder,

更多关于Flutter可重排序列表插件reorderable_items_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter可重排序列表插件reorderable_items_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用reorderable_items_view插件来实现可重排序列表的示例代码。reorderable_items_view 插件本身并不是Flutter官方插件，但假设它是一个提供类似功能的第三方插件。由于具体的第三方插件可能有所不同，这里我会给出一个概念性的示例，展示如何实现类似功能。如果reorderable_items_view插件的API与这个示例有所不同，请参考该插件的官方文档进行调整。

通常，Flutter提供了内置的ReorderableListView来实现可重排序列表。这里我会先展示如何使用ReorderableListView，然后假设reorderable_items_view插件有类似的API，提供一个概念性的示例。

使用Flutter内置的ReorderableListView

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reorderable List Example'),
        ),
        body: ReorderableListViewExample(),
      ),
    );
  }
}

class ReorderableListViewExample extends StatefulWidget {
  @override
  _ReorderableListViewExampleState createState() => _ReorderableListViewExampleState();
}

class _ReorderableListViewExampleState extends State<ReorderableListViewExample> {
  final List<String> items = List<String>.generate(10, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return ReorderableListView(
      items: items,
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          final String item = items.removeAt(oldIndex);
          items.insert(newIndex, item);
        });
      },
      buildItem: (context, index) {
        return ListTile(
          key: ValueKey('item_${items[index]}'),
          title: Text('${items[index]}'),
        );
      },
    );
  }
}

假设使用reorderable_items_view插件的概念性示例

如果reorderable_items_view插件的API类似于内置的ReorderableListView，那么使用它可能会是这样的：

import 'package:flutter/material.dart';
import 'package:reorderable_items_view/reorderable_items_view.dart'; // 假设的包路径

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reorderable Items View Example'),
        ),
        body: ReorderableItemsViewExample(),
      ),
    );
  }
}

class ReorderableItemsViewExample extends StatefulWidget {
  @override
  _ReorderableItemsViewExampleState createState() => _ReorderableItemsViewExampleState();
}

class _ReorderableItemsViewExampleState extends State<ReorderableItemsViewExample> {
  final List<String> items = List<String>.generate(10, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return ReorderableItemsView<String>( // 假设的组件名
      items: items,
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          final String item = items.removeAt(oldIndex);
          items.insert(newIndex, item);
        });
      },
      itemBuilder: (context, index, item) {
        return ListTile(
          key: ValueKey('item_$item'),
          title: Text(item),
        );
      },
    );
  }
}

注意事项

  1. 实际插件的使用：由于reorderable_items_view不是Flutter官方插件，实际使用时请参考该插件的官方文档和示例代码。
  2. API差异：如果reorderable_items_view的API与ReorderableListView有很大差异，请确保按照插件的API文档进行调整。
  3. 依赖管理：确保在pubspec.yaml文件中正确添加了对reorderable_items_view插件的依赖，并运行flutter pub get来安装它。

希望这个示例能帮助你理解如何在Flutter中实现可重排序列表。如果你使用的是特定的第三方插件，请参考其官方文档进行实现。

回到顶部