Question

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

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

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


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'),
            ),
          ],
        ));
  }
'''

Answer 1

在您的州立课程中添加

int count = 0;

添加代码

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

在这两行之间

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

并将title属性更改为

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

Answer 2

像这样显示您的文字-

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

或类似-

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

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

2 个答案: