Tag Widget | 喵个咪的博客

Flutter中父子Widget之间如何进行高效通信

Date: 1/1/2020Category: Flutter编程Tag: Flutter, Widget

Flutter 的 widget系统允许父widget 和子widget 之间无缝通信。了解如何双向调用方法可以显著增强应用的架构和性能。在本文中，我们将探讨如何从父widget 调用子widget 的方法，反之亦然。

从父部件调用子部件的方法

在 Flutter 中，可以使用属于子State类型的全局键GlobalKey来从父级调用子Widget中定义的方法。

例如：假设我们有一个名为ChildWidget的子窗口小部件

class ChildWidget extends StatefulWidget {
  const ChildWidget({super.key});

  @override
  State<ChildWidget> createState() => ChildWidgetState();
}

class ChildWidgetState extends State<ChildWidget> {
  int value = 0;

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 10,
      child: Container(
        height: 200,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.green,
        ),
        child: Column(
          children: [
            const Text(
              "Child Widget",
              style: DemoTextStyle.headline1,
            ),
            ElevatedButton(onPressed: () {}, child: const Text("Call Parent")),
            Center(
              child: Text(
                'Child value:  $value',
                style: DemoTextStyle.copyWith(
                    fontSize: 18, fontWeight: FontWeight.normal),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void changeValue() {
    setState(() {
      value++;
    });
  }

  void changeValueDynamic(int val) {
    setState(() {
      value = val;
    });
  }
}