如果您已经有列表视图构建器，如何添加可重新排序的列表视图
Posted
技术标签:
【中文标题】如果您已经有列表视图构建器，如何添加可重新排序的列表视图【英文标题】：How to add reorderable list view if you already have a list view builder 【发布时间】：2020-10-05 17:01:20 【问题描述】：我想在 Flutter 中使列表可重新排序，但我已经有了 Future Builder 和 List View。 ReorderableListView 应该是其他 ListView 的 父级还是子级？ 如何为其初始化一个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: [] 是不可能的我不知道在哪里放置 for 循环 for "i"
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.
【问题讨论】：
【参考方案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 和 index 来遍历数据库元素。这样我就可以使用未来的构建器来显示数据库中的元素而不是普通列表并重新排序该列表。
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);
);
【讨论】：
以上是关于如果您已经有列表视图构建器，如何添加可重新排序的列表视图的主要内容，如果未能解决你的问题，请参考以下文章
是否可以在颤动的可重新排序的列表视图中禁用对单个项目的重新排序？