Flutter:如何显示列表中的项目数 [英] Flutter: how to show number of items in List

问题描述

在学习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")),

这篇关于Flutter:如何显示列表中的项目数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！