我正在用Firebase Realtime数据库创建一个简单的应用程序,用户在其中输入文本并将其添加到聊天列表中。
void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.indigo, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { var _firebaseRef = FirebaseDatabase().reference().child('chats'); TextEditingController _txtCtrl = TextEditingController(); @override Widget build(BuildContext context) { var comments = _firebaseRef.orderByChild('time').limitToLast(10); return Scaffold( body: Container( child: SafeArea( child: Column( children: <Widget>[ Container( child: Row(children: <Widget>[ Expanded(child: TextField(controller: _txtCtrl)), SizedBox( width: 80, child: OutlineButton( child: Text("Add"), onPressed: () { sendMessage(); })) ])), StreamBuilder( stream: comments.onValue, builder: (context, snap) { if (snap.hasData && !snap.hasError && snap.data.snapshot.value != null) { Map data = snap.data.snapshot.value; List item = []; data.forEach( (index, data) => item.add({"key": index, ...data})); return Expanded( child: ListView.builder( itemCount: item.length, itemBuilder: (context, index) { return ListTile( title: Text(item[index]['message']), ); }, ), ); } else return Center(child: Text("No data")); }, ), ], ), ), ), ); } sendMessage() { _firebaseRef.push().set({ "message": _txtCtrl.text, 'time': DateTime.now().millisecondsSinceEpoch }); } }
它完美地存储和检索数据。但是,当我尝试添加数据时,新项目将被放置在列表中的任意位置。
例如,在下图中,我放入列表中的最后一个项目是“九”。但是它被放在列表的中心:
我尝试过按时间戳对列表进行排序,但是它什么也没做。
是什么导致此问题?我该如何解决?
调用snap.data.snapshot.value;快照时,数据(已排序)将转换Map<String,Object>为未排序的数据。为了保持顺序,您将需要收听onChild...。
snap.data.snapshot.value;
Map<String,Object>
onChild...
请注意,FlutterFire有一个方便的firebase_list库,可以onChild...为您处理大部分繁重的工作。
firebase_list