问题描述
在学习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:如何显示列表中的项目数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!