Flutter中如何从子StatefulWidget调用父StatefulWidget的函数

Hey there! Let me walk you through the standard way to let your Child widget call the goToPreviousItem function from the Parent widget. The solution relies on passing a callback function from the parent to the child—this is the go-to pattern for parent-child communication in Flutter StatefulWidgets.

Step-by-Step Fix #

First, we need to modify the Child widget to accept a callback function as a parameter. Then we'll pass the parent's goToPreviousItem method to this parameter when creating the Child instance in the parent. Finally, we'll trigger this callback from the child's button press.

Modified Parent Widget Code

class Parent extends StatefulWidget {
  @override
  _ParentState createState() => _ParentState();
}

class _ParentState extends State<Parent> {
  // Fixed type mismatch: originally String, changed to int since you're assigning numeric values
  int item = 0;

  @override
  Widget build(BuildContext context) {
    // Pass the parent's function to the Child as a callback
    return Child(onGoToPrevious: goToPreviousItem);
  }

  // Added explicit return type and parameter type for type safety
  void goToPreviousItem(int value) {
    setState(() {
      item = value;
      print("Parent item updated to: $item"); // Optional: verify the update works
    });
  }
}

Modified Child Widget Code

class Child extends StatefulWidget {
  // Define a callback property that matches the parent function's signature
  final Function(int) onGoToPrevious;

  // Use required to ensure the parent must provide this callback
  const Child({Key? key, required this.onGoToPrevious}) : super(key: key);

  @override
  _ChildState createState() => _ChildState();
}

class _ChildState extends State<Child> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlatButton(
        color: const Color(0XFFEFEFEF),
        textColor: primaryColor, // Note: Ensure primaryColor is defined in your code
        disabledColor: Colors.grey,
        disabledTextColor: Colors.black,
        padding: const EdgeInsets.symmetric(
          vertical: 15.0,
          horizontal: 10.0,
        ),
        // Trigger the parent's function via the callback
        onPressed: () => widget.onGoToPrevious(2),
        child: const Text("Update"),
      ),
    );
  }
}

Key Notes #

• Callback Pattern: This approach keeps your components decoupled— the child doesn't need to know anything about the parent's implementation, it just knows to call the provided function when needed.
• Type Safety: Matching the callback's parameter type (here int) with the parent function's parameter ensures you avoid runtime errors.
• Small Fixes: I corrected a few minor issues in your original code:
  • Fixed the item type mismatch (you tried assigning an int to a String variable)
  • Renamed ChildClass to Child (likely a typo)
  • Added proper null safety with Key? key and required for the callback parameter

内容的提问来源于stack exchange，提问作者shalu j