如何在 Flutter 中从 child widget 调用 parent widget 函数
How to call parent widget function from child widget in Flutter
我有一个 Parent StatefulWidget 和 Child StatefulWidget。我想从 child 小部件调用 parent 小部件的函数,即 goToPreviousItem
。
Parent Class
class Parent extends StatefulWidget {
@override
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> {
String item = 0;
@override
Widget build(BuildContext context) {
return ChildClass();
}
goToPreviousItem(value){
setState(() {item = value});
}
}
Child Class
class Child extends StatefulWidget {
@override
_ChildState createState() => _ChildState();
}
class _ChildState extends State<Child> {
@override
Widget build(BuildContext context) {
return Container(
child: FlatButton(
color: Color(0XFFEFEFEF),
textColor: primaryColor,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
onPressed: () => goToPreviousItem(2),
child: Text(
"Update",
),
),
);
}
}
我该怎么做?
在您的子窗口小部件中创建一个 Function
类型参数。
class Child extends StatefulWidget {
Function function;
Child({this.function});
@override
_ChildState createState() => _ChildState();
}
class _ChildState extends State<Child> {
@override
Widget build(BuildContext context) {
return Container(
child: FlatButton(
color: Color(0XFFEFEFEF),
textColor: primaryColor,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
onPressed: () => widget.function(2),
child: Text(
"Update",
),
),
);
}
}
将函数 goToPreviousItem
作为参数从父小部件传递到子小部件。
Child(function: goToPreviousItem);
使用子窗口小部件内的 widget.function(2)
访问您的函数。
typedef parentFunctionCallback = void Function(String value);
class Parent extends StatefulWidget {
@override
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> {
String item = 'data';
@override
Widget build(BuildContext context) {
return ChildClass(goToPreviousItem);
}
goToPreviousItem(String value){
setState(() {item = value;});
}
}
class ChildClass extends StatefulWidget {
const ChildClass(this.parentfunc);
/// ToDo
final parentFunctionCallback parentfunc;
@override
_ChildState createState() => _ChildState();
}
class _ChildState extends State<ChildClass> {
@override
Widget build(BuildContext context) {
return Container(
child: FlatButton(
color: Color(0XFFEFEFEF),
textColor: primaryColor,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
onPressed: () => widget.parentfunc('mail'),
child: Text(
"Update",
),
),
);
}
}
我有一个 Parent StatefulWidget 和 Child StatefulWidget。我想从 child 小部件调用 parent 小部件的函数,即 goToPreviousItem
。
Parent Class
class Parent extends StatefulWidget {
@override
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> {
String item = 0;
@override
Widget build(BuildContext context) {
return ChildClass();
}
goToPreviousItem(value){
setState(() {item = value});
}
}
Child Class
class Child extends StatefulWidget {
@override
_ChildState createState() => _ChildState();
}
class _ChildState extends State<Child> {
@override
Widget build(BuildContext context) {
return Container(
child: FlatButton(
color: Color(0XFFEFEFEF),
textColor: primaryColor,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
onPressed: () => goToPreviousItem(2),
child: Text(
"Update",
),
),
);
}
}
我该怎么做?
在您的子窗口小部件中创建一个
Function
类型参数。class Child extends StatefulWidget { Function function; Child({this.function}); @override _ChildState createState() => _ChildState(); } class _ChildState extends State<Child> { @override Widget build(BuildContext context) { return Container( child: FlatButton( color: Color(0XFFEFEFEF), textColor: primaryColor, disabledColor: Colors.grey, disabledTextColor: Colors.black, padding: EdgeInsets.symmetric( vertical: 15.0, horizontal: 10.0), onPressed: () => widget.function(2), child: Text( "Update", ), ), ); } }
将函数
goToPreviousItem
作为参数从父小部件传递到子小部件。Child(function: goToPreviousItem);
使用子窗口小部件内的
widget.function(2)
访问您的函数。
typedef parentFunctionCallback = void Function(String value);
class Parent extends StatefulWidget {
@override
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> {
String item = 'data';
@override
Widget build(BuildContext context) {
return ChildClass(goToPreviousItem);
}
goToPreviousItem(String value){
setState(() {item = value;});
}
}
class ChildClass extends StatefulWidget {
const ChildClass(this.parentfunc);
/// ToDo
final parentFunctionCallback parentfunc;
@override
_ChildState createState() => _ChildState();
}
class _ChildState extends State<ChildClass> {
@override
Widget build(BuildContext context) {
return Container(
child: FlatButton(
color: Color(0XFFEFEFEF),
textColor: primaryColor,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
onPressed: () => widget.parentfunc('mail'),
child: Text(
"Update",
),
),
);
}
}