Flutter-如何使用按钮刷新PageView中的某些Page?

时间:2019-01-25 20:34:09

标签: flutter flutter-layout

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

我需要的是,我的第一页在Scafold中具有一个Action Button,以刷新整个页面(或者,如果可以的话,重建整个类)。

我尝试在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();
                },
            ),
          ),
        ],
      );
  }
}

如果我错过了一些重要信息,请告诉我粘贴在这里。

1 个答案:

答案 0 :(得分:2)

这似乎是一个有趣的用例。您提供的示例代码不完整,无法在本地运行。但是,我确实在此示例应用程序中尝试了类似的设置。如果将有状态窗口小部件用作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'),
      ),
    );
  }
}

演示

demo