flutter - Flutter Reorderable List回到原始状态

Question

我使列表可重新排序，但现在又回到了初始状态。有人能帮我吗？我的列表包含列表磁贴，它是使用Asynsnapshot从数据库生成的。我使用的键与索引相同。似乎insert函数没有在新索引中插入注释。是因为 FutureBuilder 正在重建吗？

body: Container(
          padding: EdgeInsets.all(8.0),
          child: ListView(
            children: <Widget>[
              SizedBox(
                  height: MediaQuery.of(context).size.height * 0.882,
                  child: FutureBuilder(
                      future: databaseHelper.getNoteList(),
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        if (snapshot.data == null) {
                          return Text('Loading');
                        } else {
                          if (snapshot.data.length < 1) {
                            return Center(
                              child: Text('No Messages, Create New one'),
                            );
                          }
                          return ReorderableListView(
                            children: List.generate(
                              snapshot.data.length,
                              (index) {
                                return ListTile(
                                  key: Key('$index'),
                                  title: Text(
                                    snapshot.data[index].title,
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 20,
                                    ),
                                  ),
                                  subtitle: Text(snapshot.data[index].note,
                                      maxLines: 4),
                                  trailing: InkWell(
                                    child: Icon(Icons.add_box,
                                        color: Colors.green),
                                    onTap: () {
                                      TextEditingController txt =
                                          TextEditingController();

                                      txt.text = snapshot.data[index].note;
                                      print(txt);
                                      Route route = MaterialPageRoute(
                                          builder: (context) =>
                                              MyHomePage(custMessage: txt));
                                      Navigator.push(context, route);
                                      // addNewMessageDialog(txt);
                                    },
                                  ),
                                  // isThreeLine: true,
                                  onTap: () {
                                    Route route = MaterialPageRoute(
                                        builder: (context) => AddNote(
                                              note: snapshot.data[index],
                                            ));
                                    Navigator.push(context, route);
                                  },
                                );
                              },
                            ).toList(),
                            onReorder: _onReorder,
                          );
                        }
                      }))
            ],
          )),

整理功能

void _onReorder(int oldIndex, int newIndex) async {
    var snapshot = await databaseHelper.getNoteList();

    if (newIndex > snapshot.length) newIndex = snapshot.length;
    if (oldIndex < newIndex) newIndex -= 1;
   
      setState(() {
        final Note item = snapshot[oldIndex];
        snapshot.removeAt(oldIndex);

        print(item.title);
        snapshot.insert(newIndex, item);
      });
   
  }

我尝试添加将来的延迟，但没有用。

Answer 1

您可以在下面复制粘贴运行完整代码
您无需再次在databaseHelper.getNoteList()中调用_onReorder您可以使用noteList = snapshot.data;并操作noteList程式码片段

void _onReorder(int oldIndex, int newIndex) async {
    if (newIndex > noteList.length) newIndex = noteList.length;
    if (oldIndex < newIndex) newIndex -= 1;

    setState(() {
      final Note item = noteList[oldIndex];
      noteList.removeAt(oldIndex);

      print(item.title);
      noteList.insert(newIndex, item);
    });
  }
...
noteList = snapshot.data;
      return ReorderableListView(

工作演示

完整的代码

import 'package:flutter/material.dart';

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: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class Note {
  String title;
  String note;

  Note({this.title, this.note});
}

class databaseHelper {
  static Future<List<Note>> getNoteList() {
    return Future.value([
      Note(title: "1", note: "n1"),
      Note(title: "2", note: "n2"),
      Note(title: "3", note: "n3"),
      Note(title: "4", note: "n4"),
      Note(title: "5", note: "n5")
    ]);
  }
}

class _MyHomePageState extends State<MyHomePage> {
  List<Note> noteList = [];
  Future<List<Note>> _future;

  void _onReorder(int oldIndex, int newIndex) async {
    if (newIndex > noteList.length) newIndex = noteList.length;
    if (oldIndex < newIndex) newIndex -= 1;

    setState(() {
      final Note item = noteList[oldIndex];
      noteList.removeAt(oldIndex);

      print(item.title);
      noteList.insert(newIndex, item);
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _future = databaseHelper.getNoteList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
          padding: EdgeInsets.all(8.0),
          child: ListView(
            children: <Widget>[
              SizedBox(
                  height: MediaQuery.of(context).size.height * 0.882,
                  child: FutureBuilder(
                      future: _future,
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        if (snapshot.data == null) {
                          return Text('Loading');
                        } else {
                          if (snapshot.data.length < 1) {
                            return Center(
                              child: Text('No Messages, Create New one'),
                            );
                          }

                          noteList = snapshot.data;
                          return ReorderableListView(
                            children: List.generate(
                              snapshot.data.length,
                              (index) {
                                return ListTile(
                                  key: Key('$index'),
                                  title: Text(
                                    snapshot.data[index].title,
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 20,
                                    ),
                                  ),
                                  subtitle: Text(snapshot.data[index].note,
                                      maxLines: 4),
                                  trailing: InkWell(
                                    child: Icon(Icons.add_box,
                                        color: Colors.green),
                                    onTap: () {
                                      /*TextEditingController txt =
                                      TextEditingController();

                                      txt.text = snapshot.data[index].note;
                                      print(txt);
                                      Route route = MaterialPageRoute(
                                          builder: (context) =>
                                              MyHomePage(custMessage: txt));
                                      Navigator.push(context, route);*/
                                      // addNewMessageDialog(txt);
                                    },
                                  ),
                                  // isThreeLine: true,
                                  onTap: () {
                                    /*Route route = MaterialPageRoute(
                                        builder: (context) => AddNote(
                                          note: snapshot.data[index],
                                        ));
                                    Navigator.push(context, route);*/
                                  },
                                );
                              },
                            ).toList(),
                            onReorder: _onReorder,
                          );
                        }
                      }))
            ],
          )),
    );
  }
}