Flutter中viewWillAppear()等效实现：首页每次加载刷新用户数据

你说的这个问题很常见——iOS里你习惯用viewDidLoad实现每次进入页面加载数据（其实准确来说iOS里viewWillAppear才是每次进入都会触发的钩子，不过我们聚焦解决你的Flutter需求），但Flutter的initState只在State对象首次创建时执行一次，确实满足不了每次进入首页都刷新数据的需求。下面给你两种靠谱的实现方式：

方法一：使用WidgetsBindingObserver监听App生命周期（适合监听从后台切回前台场景） #

这个方法可以监听整个App的生命周期变化，当App从后台回到前台（resumed状态）时触发数据刷新，适合需要用户切后台再回来也刷新数据的场景：

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

class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
  User user = User();

  @override
  void initState() {
    super.initState();
    // 添加生命周期观察者
    WidgetsBinding.instance.addObserver(this);
    // 页面首次创建时加载数据
    _fetchData(context);
  }

  @override
  void dispose() {
    // 移除观察者，避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  // 监听App生命周期状态变化
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 当App回到前台时，重新加载用户数据
    if (state == AppLifecycleState.resumed) {
      _fetchData(context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: RColor.COLOR_main,
      child: Column(
        children: [
          Container(
            height: MediaQuery.of(context).size.height / 7,
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.all(20),
            child: Container(
              child: Text("This is the homepage"),
              alignment: Alignment.bottomCenter,
            ),
          ),
        ],
      ),
    );
  }

  Future _fetchData(BuildContext context) async {
    await _fetchUserAPI(context);
  }

  Future _fetchUserAPI(BuildContext context) async {
    try {
      SharedPreferences prefs = await SharedPreferences.getInstance();
      var accessToken = prefs.getString("access_token");
      var url = RConstants.API_BASE_URL + "/v1/users/self";
      Response response = await Dio().get(
        url,
        options: Options(headers: {"Authorization": accessToken}),
      );
      setState(() {
        user = User.fromJson(response.data);
      });
    } catch (e) {
      print(e.toString());
      Alert(
        context: context,
        title: "Something Went Wrong",
        desc: "Something went wrong while fetching your user data",
        type: AlertType.error,
      ).show();
    }
  }
}

方法二：使用RouteAware监听路由切换（精准监听页面进入/返回场景） #

如果你的核心需求是每次从其他页面返回首页都要刷新数据，RouteAware会更精准——它能监听当前页面是否被推入路由栈，或者从其他页面pop回来：

步骤1：在App入口注册全局RouteObserver #

首先在你的MaterialApp中添加全局路由观察者：

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App',
      navigatorObservers: [routeObserver], // 注册路由观察者
      home: HomePage(),
    );
  }
}

步骤2：在HomePage的State中混入RouteAware并监听路由状态 #

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

class _HomePageState extends State<HomePage> with RouteAware {
  User user = User();

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 订阅路由观察者
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    // 取消订阅，避免内存泄漏
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  // 当页面被首次推入路由栈时触发
  @override
  void didPush() {
    super.didPush();
    _fetchData(context);
  }

  // 当从其他页面pop回到当前页面时触发
  @override
  void didPopNext() {
    super.didPopNext();
    _fetchData(context);
  }

  @override
  void initState() {
    super.initState();
    // 首次加载数据
    _fetchData(context);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: RColor.COLOR_main,
      child: Column(
        children: [
          Container(
            height: MediaQuery.of(context).size.height / 7,
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.all(20),
            child: Container(
              child: Text("This is the homepage"),
              alignment: Alignment.bottomCenter,
            ),
          ),
        ],
      ),
    );
  }

  Future _fetchData(BuildContext context) async {
    await _fetchUserAPI(context);
  }

  Future _fetchUserAPI(BuildContext context) async {
    try {
      SharedPreferences prefs = await SharedPreferences.getInstance();
      var accessToken = prefs.getString("access_token");
      var url = RConstants.API_BASE_URL + "/v1/users/self";
      Response response = await Dio().get(
        url,
        options: Options(headers: {"Authorization": accessToken}),
      );
      setState(() {
        user = User.fromJson(response.data);
      });
    } catch (e) {
      print(e.toString());
      Alert(
        context: context,
        title: "Something Went Wrong",
        desc: "Something went wrong while fetching your user data",
        type: AlertType.error,
      ).show();
    }
  }
}

额外注意事项 #

• 不管用哪种方法，一定要在dispose中移除/取消订阅观察者，避免内存泄漏；
• 可以给_fetchData加个防抖逻辑（比如用Timer），防止短时间内多次触发请求（比如用户快速切换页面时）；
• 如果首页是底部导航栏的tab页，还可以结合BottomNavigationBar的onTap事件触发刷新，配合上面的方法能覆盖所有场景。

内容的提问来源于stack exchange，提问作者Rutger Huijsmans