Question

页面中有一个红色的customView和一个按钮：

我想在点击按钮时将 customView 的颜色更改为绿色。

要求：

必须调用customView的函数changeColor才能实现；
您不能调用页面的 setState，它是无状态的；
请勿使用 eventBus 或提供程序。

这是我所有的代码，你可以复制和测试，在CustomView的{{1}}中输入你的代码，我想要最简单的方式。

changeColor

Answer 1

您可以通过key进行更改：

使 CustomViewState public（删除开头的 _）
定义 key 并调用函数 changeColor：

class RefreshOutsidePage 扩展 StatelessWidget {

  const RefreshOutsidePage({Key key}) : super(key: key);
  final _customViewKey = GlobalKey<CustomViewState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('refresh outside')),
      body: Column(
        children: [
          CustomView(key: _customViewKey),
          SizedBox(height: 30),
          RaisedButton(
            child: Text('refresh outside'),
            onPressed: () {
              _customViewKey.currentState.changeColor();
            },
          ),
        ],
      ),
    );
  }
}

Answer 2

主要有两种解决方案。

Key 解决方案，如 Autocrab 所述。
State 解决方案，其中父小部件变为 Stateful 或在 Flutter 中实现任何状态管理解决方案以更新其子部件的值。

子 CustomView 应该是现在的 Stateless，因为您没有更改小部件内的状态。因此，您只需要从父小部件接收的额外参数即可正确更新或使用 GlobalKey 获取对小部件的引用来更新它。

如果您正在使用此项目进行学习或其他非传统项目，我建议您升级 Flutter，因为 RaisedButton 已被弃用，并且从长远来看，您还必须使用 null-safety。但这超出了本问题的范围。

如何在外部刷新小部件？

2 个答案: