我们在flutter中导航到另一个页面后如何获取数据

Question

我想在我们发布新数据后获取数据。现在我需要重新打开应用程序以获取插入的数据。像图片一样，我在下面显示。在主页，详细信息来自响应 JSON。 主页有一个按钮转到添加数据页。在我单击按钮转到 添加数据页面 之后，在添加了 电子邮件、用户名 数据后，我使用 Navigator.of(context).pop( );.问题是数据没有更新，我需要重新打开应用才能看到新插入的数据。

这是我的主页代码：

Future getDetails() async {
    http.Response response = await http.get(url);
    var decodedData = json.decode(response.body);

    setState(() {
      email= decodedData['email'];
      username= decodedData['username'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(title: Text('Home page'),
      ),
       body: SingleChildScrollView(
         child: Column(
         children: <Widget> [
          new Row(
            children: [
             Text('  Name: '+ username, style: TextStyle(fontSize: 16), textAlign: TextAlign.left,),
            Text('  Email : '+ email, style: TextStyle(fontSize: 16), textAlign: TextAlign.left,),
          ]
          ),
          new Row(
            children: [
              SizedBox(
                width: 350, 
                child: OutlineButton(
                  child: Text('ADD DATA'),
                  onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) => AddPage()));},
                )
              )
            ]
          ),
          ]
          ),
       )
    );
  }

这是我的添加数据页面代码：

Future<void> addDetails() async {
    setState(() {
      loading = true;
    });

    http.Response response = await http.post(url, 
      body: {
        'username': usernameController.text,
        'email': emailController.text,
      }
    );
    setState(() {
      loading = true;
      Navigator.pop(context);
    });
  }

有谁知道如何解决这个问题？谢谢。

Answer 1

首先，您必须将Navigator#pop 方法的结果更改为await。 Navigator#pop 有一个带有另一个参数的签名，它将在主页上被接受。您可以在主页中尝试类似的操作。

new Row(
   children: [
     SizedBox(
         width: 350, 
         child: OutlineButton(
            child: Text('ADD DATA'),
            onPressed: () async {
              final List<String> pageResult = await Navigator.of(context).push(MaterialPageRoute(builder: (context) => AddPage()));

              setState(() {
                email = pageResult[0];
                userName = pageResult[1];
              });
          },
        )
      )
   ]
);

然后在您的其他页面的弹出部分执行此操作：

setState(() {
  loading = false; //This is a bug in your code
  Navigator.pop(context, [emailController.text, userNameController.text]);
});

Answer 2

在您的主页中调用initState() 函数：

WidgetsBinding.instance.addPostFrameCallback((_){ getDetails(); });

编辑：将推送替换为以下内容

Navigator.of(context).push(MaterialPageRoute(builder: (context) => AddPage())).then((_){getDetails();});

Answer 3

您可以将弹出路由的结果返回到HomePage：

在添加数据页面内：

setState(() {
      loading = true;
      Navigator.pop(context,email);
    });

在HomePage内：

OutlineButton(
      child: Text('ADD DATA'),
      onPressed: () async {
        final String returnedEmail = await Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => AddPage()));
        setState(()=>email = returnedEmail);
      },
    );

Answer 4

我认为有办法解决你的问题：

1。使用GlobalKey 识别您的HomePage

您必须在单独的文件（例如keys.dart）中创建一个GlobalKey，它将标识您的HomePage 小部件。这将使HomePageState 类公开。

// In the keys.dart file
final GlobalKey<HomePageState> homePageKey = GlobalKey();

创建密钥后，在AddDataPage 上使用它，如下所示：

// Import your keys.dart file, and when Calling your HomePage in the build() method, specify the key
HomePage(
  key: homePageKey,
  ...
)

2。使用密钥刷新您的HomePage - 需要时-

现在在您的 addDetails() 方法中，您可以使用您的 GlobalKey 刷新 HomePage：

Future<void> addDetails() async {
    setState(() {
      loading = true;
    });

    http.Response response = await http.post(url, 
      body: {
        'email': emailController.text,
      }
    );

    // Make this setState callback async, and refresh your HomePage
    setState(() async {
      loading = false;
      await homePageKey.currentState.getDetails();
      Navigator.pop(context);
    });

    // Or you can also invert things (here the home page will be shown before refresh, useful if the getDetails() method show a kind of progress bar)
    // setState(() async {
    //   loading = false;
    //   await Navigator.pop(context);
    //   homePageKey.currentState.getDetails();
    // });

}

希望这会有所帮助！

Answer 5

1. 推送导航

新的 Future.delayed( const 持续时间（秒：5）， () => 导航器.push( 语境， MaterialPageRoute(builder: (context) => SignScreen()), ));

1. 路线导航

点按： () => Navigator.pushReplacement( 语境， new MaterialPageRoute(builder: (context) => new SignInScreen()),