在父小部件中访问子小部件的变量(Flutter with Dart)
Access child widget's variable in parent widget (Flutter with Dart)
我有一个按钮,按下它会打开一个模态底部 sheet。 sheet 有一个表单小部件,它包含几个文本字段和一张图像(来自 gallery/camera)。对于这个图像输入,我创建了另一个有状态的小部件,它在前一个视图(模态 sheet)中被调用。
现在,通过用户接收的图像文件被设置在子有状态小部件的变量中。我的问题是,如何在父小部件中访问此变量(子小部件中的 File 对象)?
请参考以下代码:
底部 Sheet:(请参阅调用子小部件的注释。)
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()
],
),
)
],
),
),
),
),
)
);
}```
如果您不使用状态管理解决方案,则必须使用回调。
在 parent 中创建一个变量。
创建一个接收值并将其分配给您刚刚创建的变量的方法。
创建最终函数并将其添加到 child 中的构造函数中。
现在,当您在 Parent 中实例化 Child 小部件时,它将接受您刚刚创建的方法。
运行 适当时 child 中的函数。
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);
},
),
);
}
}
class someChildWidget extends StatefulWidget {
String someValue ; // this is the value that should be accesible from a parent widget
@override
_someChildWidgetState createState() => _someChildWidgetState();
}
class _someChildWidgetState extends State<someChildWidget> {
.
.
.
metodInTheChild(String something) {
setState(() {
widget.someValue = something;
});
}
}
class parentWidget extends StatefulWidget {
@override
_someChildWidgetState createState() => _someChildWidgetState(esRequerido);
}
class _parentWidgetState extends State<parentWidget> {
someChildWidget scw= someChildWidget();
.
.
.
metodInTheParent() {
String value=swc.someValue; // now here is where you can access the value of the child widget
}
我有一个按钮,按下它会打开一个模态底部 sheet。 sheet 有一个表单小部件,它包含几个文本字段和一张图像(来自 gallery/camera)。对于这个图像输入,我创建了另一个有状态的小部件,它在前一个视图(模态 sheet)中被调用。 现在,通过用户接收的图像文件被设置在子有状态小部件的变量中。我的问题是,如何在父小部件中访问此变量(子小部件中的 File 对象)?
请参考以下代码:
底部 Sheet:(请参阅调用子小部件的注释。)
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()
],
),
)
],
),
),
),
),
)
);
}```
如果您不使用状态管理解决方案,则必须使用回调。
在 parent 中创建一个变量。 创建一个接收值并将其分配给您刚刚创建的变量的方法。
创建最终函数并将其添加到 child 中的构造函数中。 现在,当您在 Parent 中实例化 Child 小部件时,它将接受您刚刚创建的方法。
运行 适当时 child 中的函数。
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);
},
),
);
}
}
class someChildWidget extends StatefulWidget {
String someValue ; // this is the value that should be accesible from a parent widget
@override
_someChildWidgetState createState() => _someChildWidgetState();
}
class _someChildWidgetState extends State<someChildWidget> {
.
.
.
metodInTheChild(String something) {
setState(() {
widget.someValue = something;
});
}
}
class parentWidget extends StatefulWidget {
@override
_someChildWidgetState createState() => _someChildWidgetState(esRequerido);
}
class _parentWidgetState extends State<parentWidget> {
someChildWidget scw= someChildWidget();
.
.
.
metodInTheParent() {
String value=swc.someValue; // now here is where you can access the value of the child widget
}