当前位置:网站首页>【flutter 页面跳转后退如何刷新?】

【flutter 页面跳转后退如何刷新?】

2022-06-25 18:02:00 摸鱼的图图

百度了很多,但是写的不清楚,引用网上的一个例子
https://www.nstack.in/blog/flutter-refresh-on-navigator-pop-or-go-back/
代码如下:

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'Refresh on Go Back',
      home: HomePage(),
    );
  }
}


class HomePage extends StatefulWidget {
    
  @override
  _HomePageState createState() => _HomePageState();
}


class _HomePageState extends State<HomePage> {
    
  int id = 0;


  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              'Data: $id',
              style: Theme.of(context).textTheme.headline5,
            ),
            RaisedButton(
              child: Text('Second Page'),
              onPressed: navigateSecondPage,
            ),
          ],
        ),
      ),
    );
  }
  
  void refreshData() {
    
    id++;
  }


  onGoBack(dynamic value) {
    
    refreshData();
    setState(() {
    });
  }


// 第一部分需要设置的地方
  void navigateSecondPage() {
    
    Route route = MaterialPageRoute(builder: (context) => SecondPage());
    Navigator.push(context, route).then(onGoBack);
  }
}


class SecondPage extends StatelessWidget {
    
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
    
            //第二部分要设置的地方
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

后退刷新的关键:
从HomePage到SecondPage 使用
// 第一部分需要设置的地方
void navigateSecondPage() {
Route route = MaterialPageRoute(builder: (context) => SecondPage());
Navigator.push(context, route).then(onGoBack);
}
关键也在这里,就是有.then中的刷新方法。
onGoBack(dynamic value) {
refreshData();
setState(() {});
};

从SecondPage后退到HomePage时,使用
//第二部分要设置的地方
Navigator.pop(context);
也就是说,不需要额外的传递参数,后退到HomePage时会根据第一次跳转过来的 Navigator.push中的.then方法自动刷新。

原网站

版权声明
本文为[摸鱼的图图]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_25529689/article/details/125406500