flutter开发实战-父子Widget组件调用方法

BruceGerGer2023-07-29 9:06

flutter开发实战-父子Widget组件调用方法

在最近开发中遇到了需要父组件调用子组件方法，子组件调用父组件的方法。这里记录一下方案。

一、使用GlobalKey

父组件使用globalKey.currentState调用子组件具体方法，子组件通过方法回调callback方法调用父组件的方法。

例如示例中的

例如父组件

父组件使用globalKey.currentState调用子组件方法

globalKey.currentState?.subFunction(arg);

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

  @override
  State<FatherOutContainer> createState() => _FatherOutContainerState();
}

class _FatherOutContainerState extends State<FatherOutContainer> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  // 这里是父组件方法
  void fatherFunction(String param) {
    print("这里是父组件方法 params:${param}");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 375,
      height: 600,
      color: Colors.amber,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 20,
            height: 100,
          ),
          SubChild(
            key: globalKey,
            onPressedCallback: (param) {
              fatherFunction(param);
            },
          ),
          SizedBox(
            width: 20,
            height: 40,
          ),
          TextButton(
            child: Text("点击调用子组件方法"),
            onPressed: () {
              String arg = "来自父组件的参数";
              globalKey.currentState?.subFunction(arg);
            },
          ),
          Expanded(child: Container()),
        ],
      ),
    );
  }
}

子组件代码

子组件通过方法回调onPressedCallback方法调用父组件的方法。

onPressedCallback: (param) {

fatherFunction(param);

},

GlobalKey<_SubChildState> globalKey = GlobalKey();

// 子组件Widget
class SubChild extends StatefulWidget {
  const SubChild({
    super.key,
    required this.onPressedCallback,
  });

  final Function(String param) onPressedCallback;

  @override
  State<SubChild> createState() => _SubChildState();
}

class _SubChildState extends State<SubChild> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  // 这里是子组件方法
  void subFunction(String arg) {
    print("这里是子组件方法 arg:${arg}");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.greenAccent,
      child: Container(
        width: 200,
        height: 50,
        child: TextButton(
          child: Text("点击调用父组件方法", style: TextStyle(
            color: Colors.brown
          ),),
          onPressed: () {
            onSubBtnPressed();
          },
        ),
      )
    );
  }

  // 点击调用父组件方法
  void onSubBtnPressed() {
    print("点击调用父组件方法");
    String param = "来自子组件的参数";
    widget.onPressedCallback(param);
  }
}

二、使用Controller，中间控制器

2.1、定义Controller，这里定义中间的方法调用的类

// 使用Controller类来调用方法
class MethodController {
  // 用此方法调用子组件方法
  Function(String arg)? dealSubFunction;

  // 用此方法调用父组件方法
  Function(String arg)? dealFatherFunction;
}

2.2、父组件代码

父组件通过定义methodController.dealFatherFunction，子组件可以调用该方法进行调用父组件的方法

// 定义
methodController.dealFatherFunction = (String arg) {
      // 调用父组件方法
      fatherFunction(arg);
    };

父组件完整代码

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

  @override
  State<FatherOutContainer> createState() => _FatherOutContainerState();
}

class _FatherOutContainerState extends State<FatherOutContainer> {
  final MethodController methodController = MethodController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    methodController.dealFatherFunction = (String arg) {
      // 调用父组件方法
      fatherFunction(arg);
    };
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  // 这里是父组件方法
  void fatherFunction(String param) {
    print("这里是父组件方法 params:${param}");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 375,
      height: 600,
      color: Colors.amber,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 20,
            height: 100,
          ),
          SubChild(
            methodController: methodController,
          ),
          SizedBox(
            width: 20,
            height: 40,
          ),
          TextButton(
            child: Text("点击调用子组件方法"),
            onPressed: () {
              String arg = "来自父组件的参数";
              if (methodController.dealSubFunction != null) {
                methodController.dealSubFunction!(arg);
              }
            },
          ),
          Expanded(child: Container()),
        ],
      ),
    );
  }
}

2.3、子组件

子组件通过定义methodController.dealSubFunction，父组件可以调用该方法进行调用子组件的方法

// 定义
widget.methodController.dealSubFunction = (String arg) {
      // 调用子方法
      subFunction(arg);
    };

子组件完整代码

// 子组件Widget
class SubChild extends StatefulWidget {
  const SubChild({
    super.key,
    required this.methodController,
  });

  final MethodController methodController;

  @override
  State<SubChild> createState() => _SubChildState();
}

class _SubChildState extends State<SubChild> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    widget.methodController.dealSubFunction = (String arg) {
      // 调用子方法
      subFunction(arg);
    };
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  // 这里是子组件方法
  void subFunction(String arg) {
    print("这里是子组件方法 arg:${arg}");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 300,
        height: 300,
        color: Colors.greenAccent,
        child: Container(
          width: 200,
          height: 50,
          child: TextButton(
            child: Text(
              "点击调用父组件方法",
              style: TextStyle(color: Colors.brown),
            ),
            onPressed: () {
              onSubBtnPressed();
            },
          ),
        ));
  }

  // 点击调用父组件方法
  void onSubBtnPressed() {
    print("点击调用父组件方法");
    String param = "来自子组件的参数";
    if (widget.methodController.dealFatherFunction != null) {
      widget.methodController.dealFatherFunction!(param);
    }
  }
}

三、小结

flutter开发实战-父子Widget组件调用方法。这里使用的Globalkey调用子组件方法，通过子组件的方法回调调用父组件的方法。还可以通过Controller类来控制方法调用父子组件对应方法。父子组件方法调用的方式还可以通过事件通知等方法实现调用。

学习记录，每天不停进步。

相关推荐
比格丽巴格丽抱5 小时前
flutter项目苹果编译运行打包上线
flutter·ios
长亭外的少年6 小时前
Kotlin 编译失败问题及解决方案：从守护进程到 Gradle 配置
android·开发语言·kotlin
SoaringHeart6 小时前
Flutter进阶：基于 MLKit 的 OCR 文字识别
前端·flutter
网络安全-老纪6 小时前
iOS应用网络安全之HTTPS
web安全·ios·https
建群新人小猿8 小时前
会员等级经验问题
android·开发语言·前端·javascript·php
1024小神9 小时前
tauri2.0版本开发苹果ios和安卓android应用，环境搭建和最后编译为apk
android·ios·tauri
兰琛9 小时前
20241121 android中树结构列表（使用recyclerView实现）
android·gitee
AiFlutter10 小时前
Flutter通过 Coap发送组播
flutter
Y多了个想法10 小时前
RK3568 android11 适配敦泰触摸屏 FocalTech-ft5526
android·rk3568·触摸屏·tp·敦泰·focaltech·ft5526
lzhdim10 小时前
iPhone 17 Air看点汇总：薄至6mm 刷新苹果轻薄纪录
ios·iphone
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作