如何调用无状态小部件的重建？

Context

我有两个无状态小部件（页面）：HomePage and DetailsPage。显然应用程序启动并启动HomePage。用户可以按下一个按钮来导航到DetailsPage with a Navigator.pop()按钮导航回到HomePage.

我知道什么时候DetailsPage已完成与使用.whenComplete()方法。正是在这一点上我想重建HomePage widget.

Code

这是我行为的最小再现。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}

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

class HomePage extends StatelessWidget {
  static const name = 'Home Page';
  const HomePage() : super();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MaterialButton(
          color: Colors.blue,
          textColor: Colors.white,
          child: Text(name),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: DetailsPage.builder),
            ).whenComplete(() => print('Rebuild now.'));
          },
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class DetailsPage extends StatelessWidget {
  static const name = 'Details Page';
  static WidgetBuilder builder = (BuildContext _) => DetailsPage();
  const DetailsPage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(name),
            MaterialButton(
              color: Colors.blue,
              textColor: Colors.white,
              child: Text('Go Back'),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
    );
  }
}

Question

我如何调用这个无状态小部件的重建（HomePage）在.whenComplete()方法回调？

您可以按如下方式强制重建小部件树：

class RebuildController   {
  final GlobalKey rebuildKey = GlobalKey();
  
  void rebuild() {
    void rebuild(Element el) {
      el.markNeedsBuild();
      el.visitChildren(rebuild);
    }
    (rebuildKey.currentContext as Element).visitChildren(rebuild);
  }

}

class RebuildWrapper extends StatelessWidget  {
  
  final RebuildController controller;
  final Widget child;

  const RebuildWrapper({Key? key, required this.controller, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) => Container(
    key: controller.rebuildKey,
    child: child,
  );

}

就你而言，

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final RebuildController controller = RebuildController();

  MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RebuildWrapper(
        controller: controller,
        child: HomePage(
          rebuildController: controller,
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {

  static const name = 'Home Page';
  final RebuildController rebuildController;

  const HomePage({Key? key, required this.rebuildController}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('Hello there!');
    return Scaffold(
      body: Center(
        child: MaterialButton(
          color: Colors.blue,
          textColor: Colors.white,
          child: const Text(name),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: DetailsPage.builder),
            ).whenComplete(rebuildController.rebuild);
          },
        ),
      ),
    );
  }
  
}

class DetailsPage extends StatelessWidget {
  static const name = 'Details Page';
  static WidgetBuilder builder = (BuildContext _) => const DetailsPage();

  const DetailsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(name),
            MaterialButton(
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('Go Back'),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
    );
  }
}

class RebuildController   {
  final GlobalKey rebuildKey = GlobalKey();
  
  void rebuild() {
    void rebuild(Element el) {
      el.markNeedsBuild();
      el.visitChildren(rebuild);
    }
    (rebuildKey.currentContext as Element).visitChildren(rebuild);
  }

}

class RebuildWrapper extends StatelessWidget  {
  
  final RebuildController controller;
  final Widget child;

  const RebuildWrapper({Key? key, required this.controller, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) => Container(
    key: controller.rebuildKey,
    child: child,
  );

}

但是强制重建无状态小部件是不自然的，因为它们不应该被重建。你应该使用有状态的小部件 https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html或其他状态管理 https://docs.flutter.dev/development/data-and-backend/state-mgmt/options解决方案，以便您的主页只会更新有意义的状态改变。

来源 -这个答案 https://stackoverflow.com/a/58513635/17673002