我有一个包含 5 个选项卡的选项卡栏,每个选项卡都包含一些数据。当用户下拉刷新时,我想显示一个刷新指示器,并且选项卡内的数据应该通过 API 调用进行更新。下面是我到目前为止尝试过的代码。
帮助我了解如何在拉取时显示刷新指示器和执行某些操作的回调函数。
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
));
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
var refreshKey = GlobalKey<RefreshIndicatorState>();
// @override
// void initState() {
// super.initState();
// random = Random();
// refreshList();
// }
Future<Null> refreshList() async {
refreshKey.currentState?.show(atTop: false);
await Future.delayed(Duration(seconds: 2));
setState(() {
new HomePage();
});
return null;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Pull to refresh"),
),
body: RefreshIndicator(
key: refreshKey,
child: new DefaultTabController(
length: 5,
child: new Column(
children: <Widget>[
new Container(
width: 1200.0,
child: new Material(
color: Colors.lightBlue,
child: new TabBar(
isScrollable: true,
labelColor: Colors.white,
tabs: [
Tab(
child: new Text("All",
style: new TextStyle(fontSize: 20.0)
),
),
Tab(
child: new Text("Moving",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Idle",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Parked",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Inactive",
style: new TextStyle(fontSize: 20.0)),
),
],
),
),
),
new Expanded(
child: new TabBarView(
children: [
Tab(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
),
],
),
),
],
),
),
onRefresh: refreshList,
),
);
}
}
最佳答案
RefreshIndicator
的子项应该是 Scrollable
,在上面的示例中它是 DefaultTabController
,因此您没有获得 RefreshIndicator
我将 RefreshIndicator
移到了 Tab
View 中,并添加了一个 Scrollable
作为 subview (ListView)。请引用以下代码
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
));
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
var refreshKey = GlobalKey<RefreshIndicatorState>();
// @override
// void initState() {
// super.initState();
// random = Random();
// refreshList();
// }
Future<Null> refreshList() async {
refreshKey.currentState?.show(atTop: false);
await Future.delayed(Duration(seconds: 2));
setState(() {
new HomePage();
});
return null;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Pull to refresh"),
),
body: new DefaultTabController(
length: 5,
child: new Column(
children: <Widget>[
new Container(
width: 1200.0,
child: new Material(
color: Colors.lightBlue,
child: new TabBar(
isScrollable: true,
labelColor: Colors.white,
tabs: [
Tab(
child: new Text("All",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Moving",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Idle",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Parked",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Inactive",
style: new TextStyle(fontSize: 20.0)),
),
],
),
),
),
new Expanded(
child: new TabBarView(
children: [
Tab(
child: new RefreshIndicator(
child: new ListView(
children: <Widget>[
new Column(
children: <Widget>[
new Center(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
)
],
)
],
),
onRefresh: refreshList,
key: refreshKey,
),
),
Tab(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
),
],
),
),
],
),
),
);
}
}
我测试了代码。它运作良好。如果满足您的要求,请告诉我。
上面的 appBar
和 tabBar
看起来是分开的,所以我尝试修复它。如果你想做同样的事情,请引用下面的代码
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
));
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
var refreshKey = GlobalKey<RefreshIndicatorState>();
// @override
// void initState() {
// super.initState();
// random = Random();
// refreshList();
// }
Future<Null> refreshList() async {
refreshKey.currentState?.show(atTop: false);
await Future.delayed(Duration(seconds: 2));
//network call and setState so that view will render the new values
print("refresh");
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: new DefaultTabController(
length: 5,
child: Scaffold(
appBar: AppBar(
title: Text("Pull to refresh"),
bottom: new TabBar(
isScrollable: true,
labelColor: Colors.white,
tabs: [
Tab(
child: new Text("All", style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Moving", style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Idle", style: new TextStyle(fontSize: 20.0)),
),
Tab(
child: new Text("Parked", style: new TextStyle(fontSize: 20.0)),
),
Tab(
child:
new Text("Inactive", style: new TextStyle(fontSize: 20.0)),
),
],
),
),
body: new Column(
children: <Widget>[
new Expanded(
child: new TabBarView(
children: [
Tab(
child: new RefreshIndicator(
child: new ListView(
children: <Widget>[
new Column(
children: <Widget>[
new Center(
child: new Text("Demo",
style: new TextStyle(fontSize: 20.0)),
)
],
)
],
),
onRefresh: refreshList,
key: refreshKey,
),
),
Tab(
child:
new Text("Demo", style: new TextStyle(fontSize: 20.0)),
),
Tab(
child:
new Text("Demo", style: new TextStyle(fontSize: 20.0)),
),
Tab(
child:
new Text("Demo", style: new TextStyle(fontSize: 20.0)),
),
Tab(
child:
new Text("Demo", style: new TextStyle(fontSize: 20.0)),
),
],
),
),
],
),
),
));
}
}
关于dart - 如何刷新选项卡栏的 Flutter 拉动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51966978/