Flutter - 如何使用按钮从 PageView 刷新某些页面？

Question

我有一个Stateful类，构建的返回是一个PageView，每个页面都有一个Scafold和一个body。

我需要的是，我的第一个页面在 Scafold 中有一个操作按钮，用于刷新整个页面(或者重建我的整个类，如果可以的话)。

我尝试通过按钮在 onTap 中创建一个 setState，并创建一个 StreamController，但是，它们都没有解决我的问题。

import 'package:flutter/material.dart';
import 'package:plataforma_base/animations/loader.dart';
import 'package:plataforma_base/pages/home_body.dart';
import '../constantes/constantes.dart';
import 'dart:async';


class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final _pageController = PageController(
    initialPage: 0,
  );

  final StreamController _stream = StreamController.broadcast();


  @override
  void dispose() {
    _stream.close();
    super.dispose();
  }

  void _refreshPage(){
    _stream.sink.add(null);
  }

  @override
  Widget build(BuildContext context) {
    return
      PageView(
        controller: _pageController,
        scrollDirection: Axis.vertical,
        physics: NeverScrollableScrollPhysics(),
        children: <Widget>[
          Scaffold(
              appBar: new AppBar(
                title: new Text(
                  "HOME",
                ),
                backgroundColor: Color(Cores.corPrincipal),
                centerTitle: true,
                actions: <Widget>[
                  IconButton(
                      icon: Icon(Icons.refresh,color: Colors.white,),
                      onPressed: (){
                        _refreshPage();
                      }
                  ),
                ],
              ),
              drawer: CustomDrawer(_pageController),
            body: StreamBuilder(
                initialData: HomeBody(),
                stream: _stream.stream,
                builder: (context, snapshot){
                  Dialog(
                    child: Loader(),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                    insetAnimationCurve: Cubic(2, 5, 10, 3),
                    insetAnimationDuration: Duration(seconds: 30),
                  );
                  return HomeBody();
                },
            ),
          ),
        ],
      );
  }
}

如果我遗漏了一些重要信息，请告诉我粘贴到这里。

Answer 1

这似乎是一个有趣的用例。您提供的示例代码不完整，我无法在本地运行它。但是，我确实在这个示例应用程序中尝试过类似的设置。如果有状态小部件用作 PageView 中的页面，调用它的 setState() 应该会刷新各个页面。

这是您可以检查的示例。触发刷新操作的 FloatingActionButton 在主页中，而它调用的 refresh() 函数在页面 1 中。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var page1 = Page1();

  @override
  Widget build(BuildContext context) {
    debugPrint('HomePage build');
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: PageView(
          children: [
            page1,
            _page2(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh),
        backgroundColor: Colors.blueAccent,
        onPressed: () {
          debugPrint('Refresh Page 1');
          page1.getState().refresh();
        },
      ),
    );
  }

  _page2() {
    return Container(
      color: Colors.greenAccent,
    );
  }
}

class Page1 extends StatefulWidget {
  Page1State page1State;

  @override
  Page1State createState() {
    page1State = Page1State();
    return page1State;
  }

  getState() => page1State;
}

class Page1State extends State<Page1> {
  var refreshCount = 0;

  refresh() {
    debugPrint('Page 1 refresh');
    setState(() {
      refreshCount++;
    });
  }

  @override
  Widget build(BuildContext context) {
    debugPrint('Page 1 build');
    return Container(
      color: Colors.lightBlueAccent,
      child: Center(
        child: Text('Refresh clicked $refreshCount times'),
      ),
    );
  }
}

演示