如何在 Flutter 上使用 FutureBuilder 添加 RefreshIndicator
How to add RefreshIndicator with FutureBuilder on Flutter
我需要在未来的构建器上使用刷新指示器小部件实施拉动刷新操作。首先,我知道这个话题有多个话题。但我还是做不到。这是我关于这个主题的代码:
final QuerySnapshot<Map<String, dynamic>> querySnapshot =
snapshot.data as QuerySnapshot<Map<String, dynamic>>;
return ListView(
physics: const BouncingScrollPhysics(),
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 28.8, bottom: 16.8),
height: 714.8,
child: FutureBuilder<List<FirabaseWeatherModel>>(
future: chnageList(querySnapshot),
builder: (BuildContext context,
AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
ListView.builder(
itemCount: firabseModelList.length,
padding:
const EdgeInsets.only(left: 28.8, right: 12),
scrollDirection: Axis.vertical,
physics: const BouncingScrollPhysics(),
itemBuilder: (context, index) {
return Container(
height: 214.8,
width: 188.4,
margin: const EdgeInsets.only(
right: 16.8, bottom: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
querySnapshot.docs[index]
.data()['image'],
maxHeight: 200,
maxWidth: 200),
),),
child: Stack(
children: <Widget>[
GestureDetector(
onTap: () => gotoPage(querySnapshot
.docs[index]
.data()['title'])),
],),);},);
} else if (snapshot.connectionState ==
ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);}
return ListView.builder(
itemCount: firabseModelList.length,
padding: const EdgeInsets.only(left: 28.8, right: 12),
scrollDirection: Axis.vertical,
physics: const BouncingScrollPhysics(),
itemBuilder: (context, index) {
return Container(
height: 214.8,
width: 188.4,
margin: const EdgeInsets.only(
right: 16.8, bottom: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
querySnapshot.docs[index].data()['image'],
maxHeight: 200,
maxWidth: 200),
),),
child: Stack(
children: <Widget>[
GestureDetector(
onTap: () => gotoPage(querySnapshot
.docs[index]
.data()['title'])),
Positioned(
child: ClipRRect(
child: Container(
height: 80,
alignment: Alignment.centerLeft,
child: Column(
children: [
Align(
child: Container(
alignment: Alignment.topCenter,
child: Text(
querySnapshot.docs[index]
.data()['tr'],
style: const TextStyle(
fontSize: 15,
),),),),
Row(
children: <Widget>[
Expanded(
child: getImage(
querySnapshot.docs[index]
.data()['zposition1']
.toString(),
150),
),],),],),),),),],),);},);}),),],);
我已经上传了所有代码,以防您想使用所有代码自己尝试。我应该在哪里使用这些刷新指示器代码:
RefreshIndicator(
onRefresh: () {},),
添加密钥
GlobalKey _key = GlobalKey();
然后将上一个键分配给顶部小部件
return RefreshIndicator(
onRefresh: _refresh,
child: Container(
key: _key,
child: ListView(
physics: AlwaysScrollableScrollPhysics(),
children: [
// do your stuff
],
),
),
);
然后刷新函数,因为你应该更新密钥
Future<void> _refresh() async {
if (mounted) {
_key = GlobalKey();
setState(() {});
}
Future.value(null);
}
我需要在未来的构建器上使用刷新指示器小部件实施拉动刷新操作。首先,我知道这个话题有多个话题。但我还是做不到。这是我关于这个主题的代码:
final QuerySnapshot<Map<String, dynamic>> querySnapshot =
snapshot.data as QuerySnapshot<Map<String, dynamic>>;
return ListView(
physics: const BouncingScrollPhysics(),
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 28.8, bottom: 16.8),
height: 714.8,
child: FutureBuilder<List<FirabaseWeatherModel>>(
future: chnageList(querySnapshot),
builder: (BuildContext context,
AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
ListView.builder(
itemCount: firabseModelList.length,
padding:
const EdgeInsets.only(left: 28.8, right: 12),
scrollDirection: Axis.vertical,
physics: const BouncingScrollPhysics(),
itemBuilder: (context, index) {
return Container(
height: 214.8,
width: 188.4,
margin: const EdgeInsets.only(
right: 16.8, bottom: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
querySnapshot.docs[index]
.data()['image'],
maxHeight: 200,
maxWidth: 200),
),),
child: Stack(
children: <Widget>[
GestureDetector(
onTap: () => gotoPage(querySnapshot
.docs[index]
.data()['title'])),
],),);},);
} else if (snapshot.connectionState ==
ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);}
return ListView.builder(
itemCount: firabseModelList.length,
padding: const EdgeInsets.only(left: 28.8, right: 12),
scrollDirection: Axis.vertical,
physics: const BouncingScrollPhysics(),
itemBuilder: (context, index) {
return Container(
height: 214.8,
width: 188.4,
margin: const EdgeInsets.only(
right: 16.8, bottom: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
querySnapshot.docs[index].data()['image'],
maxHeight: 200,
maxWidth: 200),
),),
child: Stack(
children: <Widget>[
GestureDetector(
onTap: () => gotoPage(querySnapshot
.docs[index]
.data()['title'])),
Positioned(
child: ClipRRect(
child: Container(
height: 80,
alignment: Alignment.centerLeft,
child: Column(
children: [
Align(
child: Container(
alignment: Alignment.topCenter,
child: Text(
querySnapshot.docs[index]
.data()['tr'],
style: const TextStyle(
fontSize: 15,
),),),),
Row(
children: <Widget>[
Expanded(
child: getImage(
querySnapshot.docs[index]
.data()['zposition1']
.toString(),
150),
),],),],),),),),],),);},);}),),],);
我已经上传了所有代码,以防您想使用所有代码自己尝试。我应该在哪里使用这些刷新指示器代码:
RefreshIndicator(
onRefresh: () {},),
添加密钥
GlobalKey _key = GlobalKey();
然后将上一个键分配给顶部小部件
return RefreshIndicator(
onRefresh: _refresh,
child: Container(
key: _key,
child: ListView(
physics: AlwaysScrollableScrollPhysics(),
children: [
// do your stuff
],
),
),
);
然后刷新函数,因为你应该更新密钥
Future<void> _refresh() async {
if (mounted) {
_key = GlobalKey();
setState(() {});
}
Future.value(null);
}