时间戳

首页 > 解决方案 > Flutter - 从另一个有状态小部件设置一个有状态小部件的变量值

flutter - Flutter - 从另一个有状态小部件设置一个有状态小部件的变量值

问题描述

我是 Flutter 的新手，这可能是一个非常棘手的问题，但我想从另一个 Stateful 小部件设置一个有状态小部件的变量状态。

分享一个重现问题的小片段。

FirstWidget.dart

class FirstWidget extends StatefulWidget {
  @override
  _FirstWidgetState createState() => _FirstWidgetState();
}

class _FirstWidgetState extends State<FirstWidget> {

bool _isDisabled = true; 

 @override
  Widget build(BuildContext context) {
    return Container(
               // Doing Something with the flag isDisabled
);
  }
}

SecondWidget.dart

class SecondWidget extends StatefulWidget {
  @override
  _SecondWidgetState createState() => _SecondWidgetState();
}

class _SecondWidgetState extends State<SecondWidget> {

 @override
  Widget build(BuildContext context) {
    return Container(
        // Here I want to update the isDisabled Flag of the First Widget. 
);

  }
}

我基本上只是想知道如何从另一个小部件更新一个小部件的变量值。

谢谢

标签： flutterwidget

解决方案

为此，您可以使用GlobalKey. GlobalKey用于标识小部件树中的特定小部件。

使用示例：

在 FirstWidget.dart 文件中：

class FirstWidget extends StatefulWidget {
  @override
  FirstWidgetState createState() => FirstWidgetState();
}

// Make sure your FirstWidgetState class is not private!
class FirstWidgetState extends State<FirstWidget> {

  bool _isDisabled = true;

  void enable(bool value) {
    setState(() => _isDisabled = !value);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // Doing Something with the flag isDisabled
    );
  }
}

在 SecondWidget.dart 文件中（我稍微更改了这个文件以显示 的用法GlobalKey）：

final GlobalKey<FirstWidgetState> firstWidgetGlobalKey = new GlobalKey<FirstWidgetState>();

class SecondWidget extends StatefulWidget {
  @override
  _SecondWidgetState createState() => _SecondWidgetState();
}

class _SecondWidgetState extends State<SecondWidget> {

 @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          FirstWidget(
            key: firstWidgetGlobalKey,
          ),
          RaisedButton(
            onPressed: () {
              firstWidgetGlobalKey.currentState.enable(true);
            },
            child: Text("Enable First Widget"),
          ),
        ],
      ),
    );
  }
}

编辑

一个GlobalKey实例在整个应用程序中是唯一的。因此，使用全局键的一种更聪明的方法是将它们全部存储在一个单独的文件中（例如 . keys.dart）。在此文件中，您可以将firstWidgetGlobalKey和secondWidgetGlobalKey作为最终变量，只需导入文件即可使用它们。

一个缺点（但这是一种预期的行为）是 aGlobalKey只能在它识别的小部件当前存在于小部件树中时使用，否则您将在 上获得空引用currentState。

从另一个小部件访问小部件状态的另一种方法是使用InheritedWidget。由于它需要更多的努力，因此有一个很棒且简单的教程来展示用法：InheritedWidget Tutorial on Medium。

希望这会有所帮助！

推荐阅读