dart - 如何刷新选项卡栏的 Flutter 拉动？

Question

我有一个包含 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,
      ),
    );
  }
}

Answer 1

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