如何刷新Flutter中的选项卡栏？

Question

我有一个标签栏，其中有5个标签，每个标签包含一些数据。当用户下拉刷新时，我想显示一个刷新指示器，并且选项卡中的数据应通过API调用进行更新。下面是我到目前为止尝试过的代码。

请帮助我了解如何在pull和回调函数上显示刷新指示符。

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

Answer 1

RefreshIndicator的子级应该是Scrollable，在上面的示例中，它是DefaultTabController，因此您没有得到RefreshIndicator

我将RefreshIndicator移到了Tab视图中，并添加了Scrollable作为子级（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)),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ));
  }
}