如何在 Flutter 中使用 flutter_bloc 自动刷新上一页（第一页）

Question

SCENARIO

有两个页面，第一页是主页，它在 flutter_bloc 包的帮助下自动获取 api 数据。在主页（第一页）中还有一个按钮，可以借助此代码 Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => SettingsPage())); 转到第二页（设置页面）。在第二页中，底部有 3 个单选按钮和一个按钮（按钮名称为保存）。当我点击保存按钮时，它会在这段代码的帮助下返回主页 Navigator.pop(context);

QUESTION

当我 select 任何单选按钮并单击底部的按钮时，如何刷新或重建主页并再次获取 api 数据。

Answer 1

您可以将主页的bloc实例传递给设置页面bloc，然后当您按下保存时，或者当您更改设置中的选项时，在主页bloc中触发一个事件来获取更新数据并在主页 bloc 输出流中发出结果。

Answer 2

// Sample code 

'import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

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

EdgeInsets globalMargin =
const EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0);
TextStyle textStyle = const TextStyle(
  fontSize: 100.0,
  color: Colors.black,
);

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int number = 0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('SO Help'),
      ),
      body: new Column(
        children: <Widget>[
          new Text(
            number.toString(),
            style: textStyle,
          ),
          new GridView.count(
            crossAxisCount: 2,
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            children: <Widget>[
              new InkResponse(
                child: new Container(
                    margin: globalMargin,
                    color: Colors.green,
                    child: new Center(
                      child: new Text(
                        "+",
                        style: textStyle,
                      ),
                    )),
                onTap: () {
                  setState(() {
                    number = number + 1;
                  });
                },
              ),
              new Sub(this),
            ],
          ),
        ],
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () {
          setState(() {});
        },
        child: new Icon(Icons.update),
      ),
    );
  }
}

class Sub extends StatelessWidget {

  _MyHomePageState parent;

  Sub(this.parent);

  @override
  Widget build(BuildContext context) {
    return new InkResponse(
      child: new Container(
          margin: globalMargin,
          color: Colors.red,
          child: new Center(
            child: new Text(
              "-",
              style: textStyle,
            ),
          )),
      onTap: () {
        this.parent.setState(() {
          this.parent.number --;
        });
      },
    );
  }
}

Answer 3

在第一页的 onPressed 函数处使用此代码

Navigator.of(context).push(new MaterialPageRoute(builder: (_)=>new PageTwo()),)
    .then((val)=>val?_getRequests():null),

将 _getRequest 的值更改为 API 调用并将第二页更改为下一页。

如何在 Flutter 中使用 flutter_bloc 自动刷新上一页（第一页）

How to auto refresh previous page (first page) using flutter_bloc in Flutter

dart

flutter

bloc

flutter-bloc