Flutter:如何显示列表中的项目数

本文介绍了Flutter:如何显示列表中的项目数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在学习Flutter的同时，我编写了一个显示项目列表的CRUD程序.我想在屏幕底部显示列表中的项目数，但我一直无法实现.当前显示的代码(最后)包含一个BottomNavigationBar和一个BottomNavigationBarItem，我试图在其中显示列表中项目的数量，即:

While learning Flutter, I have written a CRUD program that shows a list of items. I want to show at the bottom of the screen the number of items in the list, but I have been unable to achieve that. Currently the code shown contains (at the end) a BottomNavigationBar and a BottomNavigationBarItem where I attempt to show the number of items in the list, viz:

title: Text("Items = $this.itemCount")), // title: Text("")),

但是，它仅显示项目数量的"...".我希望有人向我展示如何实现我的要求.

However it just shows "..." for the number of items. I would appreciate someone showing me how to achieve what I require.

class NotesList extends StatefulWidget { @override NotesListPageState createState() => NotesListPageState(); } class NotesListPageState extends State<NotesList> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Notes List'), centerTitle: true, ), body: new Container( padding: new EdgeInsets.all(16.0), child: new FutureBuilder<List<Map>>( future: fetchDataFromDb(), builder: (context, snapshot) { if (snapshot == null) { return Container( alignment: AlignmentDirectional.center, child: CircularProgressIndicator(), ); } else if (snapshot.hasData) { return ListView.builder( itemCount: snapshot == null ? 0 : snapshot.data.length, itemBuilder: (context, index) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ ListTile( leading: (IconButton /* Edit */ ( color: Colors.blue, icon: new Icon(Icons.edit), onPressed: () => _showEditScreen( Crud.eUpdate, snapshot.data[index]))), onLongPress: () => _showEditScreen( Crud.eRead, snapshot.data[index]), trailing: (IconButton( color: Colors.red, icon: new Icon(Icons.delete), onPressed: () => _showEditScreen( Crud.eDelete, snapshot.data[index])))), ]); }); } else if (snapshot.hasError) { return Text("${snapshot.error}"); } else { return new Text("No data in table"); } }, ), ), bottomNavigationBar: BottomNavigationBar( onTap: (int index) { if (index == 1) { Navigator.of(context).pop(); } }, items: [ BottomNavigationBarItem( icon: Icon(Icons.info), title: Text("Items = $this.itemCount")), // title: Text("")), BottomNavigationBarItem( icon: Icon(Icons.add), title: Text('Create'), ), ], )); } '''

推荐答案

在您的州立课程中添加

int count = 0;

添加代码

WidgetsBinding.instance .addPostFrameCallback((_) { setState(){ count = snapshot.data.length; } });

这两行之间

else if (snapshot.hasData) { return ListView.builder(

并将title属性更改为

and change the title property to

title: Text("Items = $count")),