如果您已有列表视图构建器，如何添加可重新排序的列表视图

Question

我想在 Flutter 中使列表 Reorderable 但我已经有了 Future Builder 和列表视图。 ReorderableListView 应该是其他 ListView 的 parent 或 child？ 如何初始化一个key？

 return Scaffold(
    body: Container(
    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 ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int i) {
                    return Column(
                      children: <Widget>[
                        ListTile(
                          title: Text(snapshot.data[i].title),
                          ),
                          subtitle:
                              Text(snapshot.data[i].note, maxLines: 4),
                          onTap: () {},
                        ),
                        Divider(color: Theme.of(context).accentColor)
                      ],
                    );
                  },
                );
              }
            },
          ),
        )
      ],
    ),
  ),
);

我尝试添加 ReorderableListView，但由于 children: [] 不可能，我不知道在哪里放置“ i ”的 for 循环

                      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[i].title,
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 20,
                                  ),
                                ),
                                subtitle:
                                    Text(snapshot.data[i].note, maxLines: 4),
                                trailing: InkWell(
                                  child: Icon(Icons.check, color: Colors.green),
                                  onTap: () {
                                    TextEditingController txt =
                                        TextEditingController();

                                    txt.text = snapshot.data[i].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[i],
                                          ));
                                  Navigator.push(context, route);
                                },
                              );
                            },
                          ).toList()

                              //Divider(color: Theme.of(context).accentColor),

                              );
                        }
                      })```

Right now the error is undefined variable i.

Answer 1

我知道怎么解决了。

```Widget build(BuildContext context) {
    databaseHelper.initlizeDatabase();
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text('Notes'),
      ),
      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.check,
                                          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: (int oldIndex, int newIndex) {
                                setState(() {
                                  if (newIndex > oldIndex) {
                                    newIndex -= 1;
                                  }
                                  final item = snapshot.data.removeAt(oldIndex);
                                  snapshot.data.insert(newIndex, item);
                                });
                              }

                              //Divider(color: Theme.of(context).accentColor),
                              );
                        }
                      }))
            ],
          )),
      floatingActionButton: _buildFAB(context, key: _fabKey),
    );
  }```

基本上，使用 List.generate 并使用索引遍历数据库元素。这样我就可以使用 future builder 来显示数据库中的元素而不是普通列表并重新排序该列表。

                      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,
                                      ),
                                    ),
                                    subtitle: Text(snapshot.data[index].note,
                                        maxLines: 4),
                                    onTap: () {                                       

                                      },
                                    ),

                                    onTap: () {
                                      Route route = MaterialPageRoute(
                                          builder: (context) => AddNote(
                                                note: snapshot.data[index],
                                              ));
                                      Navigator.push(context, route);
                                    },
                                  );
                                },
                              ).toList(),
                              onReorder: (int oldIndex, int newIndex) {
                                setState(() {
                                  if (newIndex > oldIndex) {
                                    newIndex -= 1;
                                  }
                                  final item = snapshot.data.removeAt(oldIndex);
                                  snapshot.data.insert(newIndex, item);
                                });
                              }