如何在Flutter中将ReorderableListView与DismissDirection一起使用？

Question

我需要在我的重新排序列表中包含使用滑动删除项目的选项。问题是ReorderableListView小部件收到一个列表，因此我无法添加Dismissible（）小部件。有什么办法可以解决这个问题？

  Widget _buildReorderableListSimple(BuildContext context) {
    return ReorderableListView(
      onReorder: _onReorder,
      children: _getListItems(),
    );
  }

 List<ListTile> _getListItems() => _items
      .map(
        (Song item) => _buildTenableListTile(context, item),
      )
      .toList();

  ListTile _buildTenableListTile(Song item, int index) {
    return ListTile(
      key: ValueKey(item.songId),
      title: new Text(
        '${item.sequence}. ${item.name}',
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
      subtitle: new Text(
        '${item.artist} ${item.songId}',
        style: TextStyle(
          color: Colors.black,
        ),
      ),
      onTap: () {

      },
    );
  }

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用List<Widget>并返回Widget

代码段

List<Widget> _getListItems() => _items
      .asMap()
      .map((i, item) => MapEntry(i, _buildTenableListTile(item, i)))
      .values
      .toList();

Widget _buildTenableListTile(Song item, int index) {
    return Dismissible(
      key: Key(item.songId),
      onDismissed: (direction) {
        setState(() {
          _items.removeAt(index);
        });
      },
      background: Container(color: Colors.red),
      child: ListTile(
        key: ValueKey(item.songId),

工作演示

完整代码

import 'package:flutter/material.dart';

class Song {
  String songId;
  String name;
  String sequence;
  String artist;

  Song({this.name, this.songId, this.artist, this.sequence});
}

class TopTenList extends StatefulWidget {
  @override
  _TopTenListState createState() => _TopTenListState();
}

class _TopTenListState extends State<TopTenList> {
  List<Song> _items = [
    Song(
        songId: "1",
        name: "name 1",
        artist: "artist 1",
        sequence: "sequence 1"),
    Song(
        songId: "2",
        name: "name 2",
        artist: "artist 2",
        sequence: "sequence 2"),
    Song(
        songId: "3",
        name: "name 3",
        artist: "artist 3",
        sequence: "sequence 3"),
    Song(
        songId: "4",
        name: "name 4",
        artist: "artist 4",
        sequence: "sequence 4"),
    Song(
        songId: "5",
        name: "name 5",
        artist: "artist 5",
        sequence: "sequence 5"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Top Ten"),
      ),
      body: ReorderableListView(
        onReorder: onReorder,
        children: _getListItems(),
      ),
    );
  }

  void onReorder(int oldIndex, int newIndex) {
    if (newIndex > oldIndex) {
      newIndex -= 1;
    }

    setState(() {
      Song song = _items[oldIndex];

      _items.removeAt(oldIndex);
      _items.insert(newIndex, song);
    });
  }

  List<Widget> _getListItems() => _items
      .asMap()
      .map((i, item) => MapEntry(i, _buildTenableListTile(item, i)))
      .values
      .toList();

  Widget _buildTenableListTile(Song item, int index) {
    return Dismissible(
      key: Key(item.songId),
      onDismissed: (direction) {
        setState(() {
          _items.removeAt(index);
        });
      },
      background: Container(color: Colors.red),
      child: ListTile(
        key: ValueKey(item.songId),
        title: Text(
          '${item.sequence}. ${item.name}',
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
        subtitle: Text(
          '${item.artist} ${item.songId}',
          style: TextStyle(
            color: Colors.black,
          ),
        ),
        onTap: () {},
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TopTenList(),
    );
  }
}