Flutter：是不是可以替换小部件本身？

Posted 2023-02-23

【中文标题】Flutter：是不是可以替换小部件本身？

【英文标题】：Flutter: Is it possible to substitute widget itself?Flutter：是否可以替换小部件本身？

【发布时间】：2018-08-24 15:55:30

【问题描述】：

我有以下情况：

第 1,2,3 行的主小部件 在第 2 行中，我最初设置了小部件 A

我想要什么：

一旦我在小部件 A 中发生状态更改，请将小部件 A 替换为小部件 B 在小部件 A 中而不是在主小部件中处理替换（所以我不想使用小部件 A 的回调或观察全局状态并在主小部件中对其做出反应） 替换意味着：小部件 B 仍然是主小部件的子小部件（在我的情况下，它停留在第二行并且不会像使用路由/导航器时那样全屏显示？）

我想要什么的理由：

在主窗口小部件的每一行中，用户可以与子菜单交互，例如第 2 行包含 WidgetA -> [用户交互] -> WidgetB [用户交互] -> WidgetC 我不想从主小部件管理所有这些不同的状态

我尝试了什么：

//in Widget A -> in order to switch to Widget B

Navigator.push(context, new MaterialPageRoute(
   builder: (_) => new WidgetB(),
));

这不起作用，因为 Widget B 没有留在主 Widget 的 WidgetTree 中

如果这是不可能的，我想知道实现我想要的东西的颤振方式是什么:-)

【问题讨论】：

我不明白。你有真实世界的例子或图画吗？

听起来你想要一个条件小部件？像(showB == true) ? WidgetB() : WidgetA(); 这样的东西我很确定无论如何你都必须将 something 传递回主小部件。

【参考方案1】：

您需要有一些知道此子导航的父级。你不能真正自己替换视图，它的父级是对树中那个小部件的引用，所以父级是需要传达这一点的东西。

也就是说，您可以制作一个自定义小部件，其工作是监听子事件，并相应地更改子事件。

  App
 /   \
Row  Row
      |
 WidgetParent
      | 
   WidgetA

这里WidgetParent 可以保留例如Listenable 并将 ChangeNotifier 传递给 WidgetA。当WidgetA 决定WidgetX 应该出现在屏幕上时，它可以将其发送给父级。

class WidgetParent extends AnimatedWidget 
  WidgetParent() : super(listenable: ValueNotifier<Widget>(null));

  ValueNotifier<Widget> get notifier => listenable as ValueNotifier<Widget>;

  Widget build(BuildContext context) 
    return new Center(child: notifier.value ?? WidgetA(notifier));
  

现在子小部件可以通知谁是下一个。

class WidgetA extends StatelessWidget 
  WidgetA(this.notifier);

  final ValueNotifier<Widget> notifier;

  @override
  Widget build(BuildContext context) 
    return RaisedButton(
      onPressed: () => notifier.value = WidgetB(notifier),
      child: Text("This is A, go to B"),
    );
  


class WidgetB extends StatelessWidget 
  WidgetB(this.notifier);

  final ValueNotifier<Widget> notifier;

  @override
  Widget build(BuildContext context) 
    return RaisedButton(
      onPressed: () => notifier.value = WidgetA(notifier),
      child: Text("This is B, go to A"),
    );
  

【参考方案2】：

我对 Flutter 还很陌生，但我能想到的一种解决方法是 - 您将 State 与小部件一起使用。例如，如果要根据用途显示两行，则将一行的高度设置为所需的高度，并将第二行的高度设置为零。并按需更换。 当然，您也需要清空内容。例如将文本设置为 '' 等。 这可能不是理想的解决方案，但可以工作。