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

Posted 2023-02-23

【中文标题】如何调用无状态小部件的重建？

【英文标题】：How to invoke a rebuild of a stateless widget?

【发布时间】：2021-04-27 01:23:47

【问题描述】：

上下文

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

我知道DetailsPage 何时与.whenComplete() 方法一起使用。正是在这一点上，我想重建 HomePage 小部件。

代码

这是我行为的最小再现。

main.dart

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());
  

home.dart

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.'));
          ,
        ),
      ),
    );
  

details.dart

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),
            ),
          ],
        ),
      ),
    );
  

问题

如何在.whenComplete() 方法回调中调用此无状态小部件 (HomePage) 的重建？

【问题讨论】：

重建这个无状态小部件有什么意义？

你看过这个：***.com/questions/49804891/…

这个例子只是一个最小的例子。在我的实际应用程序中，我正在构建函数 (FutureBuilder) 中向 Web 服务器发出获取请求，并且我知道 Web 服务数据更新 之后 我离开第二页，所以我想要那个数据反映在第一页。

我认为这个例子行不通，坚果。它需要StatefulWidget，而我的实际实现没有要更新的状态。除非我能够在不实际更新状态值的情况下任意调用setState（可以吗？）。

我不知道为什么这个问题被否决了？它满足质量 Stack Overflow 问题的所有要求。

【参考方案1】：

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

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,
  );

但是强制重建无状态小部件是不自然的，因为它们不应该被重建。您应该使用stateful widget 或其他state management 解决方案，以便您的主页仅在有意义状态更改时更新。

来源 - this answer

【讨论】：

这是有道理的。我同意你的看法。如果不使用真正的状态管理，这个问题确实没有解决方案。不过感谢黑客！这真的很有趣

我的荣幸！我在考虑 RepaintBoundary 但它不会重建你想要的行为的小部件。