如何从 Flutter 中的子小部件调用父小部件功能

Posted 2023-02-23

【中文标题】如何从 Flutter 中的子小部件调用父小部件功能

【英文标题】：How to call parent widget function from child widget in Flutter

【发布时间】：2021-05-04 04:38:10

【问题描述】：

我有一个父 StatefulWidget 和一个子 StatefulWidget。我想从子小部件调用父小部件的函数，即goToPreviousItem。

父类

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);
 

儿童班

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",
    ),
  ),
);
   
 

我该怎么做？

【参考方案1】：

在您的子小部件中创建一个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) 访问您的函数。

【参考方案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",
        ),
      ),
    );