在父窗口小部件中访问子窗口小部件的变量(Flutter with Dart)

Jag*_*gia 5 global-variables dart flutter scoped-model

我有一个按钮,按下该按钮会打开模式底部表单。该工作表有一个表单小部件,需要几个文本字段和一个图像(来自图库/相机)。对于此图像输入,我创建了另一个有状态小部件,该小部件在上一个视图(模式表)中调用。现在,通过用户接收到的图像文件被设置在子有状态小部件的变量中。我的问题是,如何在父窗口小部件内访问此变量(子窗口小部件中的文件对象)?

请参考以下代码:

底页:(请参阅调用子窗口小部件的注释。)

        context: _scaffoldKey.currentContext,
        builder: (BuildContext context) {
          return Scaffold(
              backgroundColor: Colors.white,
              appBar: AppBar(
                elevation: 0.0,
                automaticallyImplyLeading: false,
                backgroundColor: Colors.white,
                title: Center(
                  child: _formTitleWidget(),
                ),
              ),
              body: Container(
              height: MediaQuery.of(context).size.height* 0.5,
              margin: EdgeInsets.all(MediaQuery
                  .of(context)
                  .copyWith()
                  .size
                  .width * 0.05),
              child: Form(
                key: _addChildFormKey,
                child: SingleChildScrollView(
                  child: Container(
                    height: MediaQuery.of(context).size.height* 0.4,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        // Calling the child widget here - where 'image' variable is set
                        AddChildView(),
                        Container(
                          height: MediaQuery.of(context).size.height* 0.4,
                          width:  MediaQuery.of(context).size.width* 0.65,
                          child: Column(
                            children: [
                              _childNameInput(),
                              _childBirthDateInput(),
                              _childHeightInput(),
                              _childWeightInput(),
                              _addChildWithInfo()
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            )
          );
        }```
Run Code Online (Sandbox Code Playgroud)

Pat*_*lly 7

如果您不使用状态管理解决方案,则必须使用回调。

在父级中创建一个变量。创建一个接收值并将其分配给您刚刚创建的变量的方法。

创建一个最终的 Function 并将其添加到子级的构造函数中。现在,当您在父级中实例化子级小部件时,它将接受您刚刚创建的方法。

在适当的时候在您的孩子中运行该函数。

class ParentWidget extends StatelessWidget {
  Image image;

  callBack(Image imageFromChild) {
    this.image = imageFromChild;
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class ChildWidget extends StatelessWidget {
  final Function callBack;

  const ChildWidget({Key key, this.callBack}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlatButton(
        child: Text('Press'),
        onPressed: () {
          var image = uploadImageMethod();
          callBack(image);
        },
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 当我说状态管理解决方案时,我指的是应用程序状态解决方案而不是短暂状态。例如 bloc、mobx、redux、provider。 (2认同)