Flutter 父子组件互调方法

这篇具有很好参考价值的文章主要介绍了Flutter 父子组件互调方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Flutter 父子组件互调方法

一、父组件调用子组件方法

1、概述

使用 GlobalKey:可以为子组件创建一个 GlobalKey 对象,通过该 GlobalKey 可以获取到子组件的状态,并调用其方法。

2、代码实现

import 'package:flutter/material.dart';

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

  
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  // 在父组件中创建 GlobalKey
  GlobalKey<SonWidgetState> sonWidgetState = GlobalKey<SonWidgetState>();

  
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 在子组件中使用 GlobalKey
          SonWidget(key: sonWidgetState),
          const SizedBox(height: 10),
          ElevatedButton(
            onPressed: () => {
              // 调用子组件方法
              sonWidgetState.currentState?.changeName("訾博${DateTime.now().microsecondsSinceEpoch}"),
            },
            child: const Text("change name"),
          )
        ],
      ),
    );
  }
}

/// 子组件
class SonWidget extends StatefulWidget {
  const SonWidget({super.key});

  
  State<StatefulWidget> createState() => SonWidgetState();
}

class SonWidgetState extends State<SonWidget> {
  late String name = "zibo";

  /// 父组件调用此方法实现修改 name
  /// @param newName 新的名字
  void changeName(String newName) {
    setState(() {
      name = newName;
    });
  }

  
  Widget build(BuildContext context) {
    return Center(
      child: Text(name, style: const TextStyle(fontSize: 40)),
    );
  }
}

3、效果

flutter 父组件调用子组件方法,Flutter,flutter,javascript,前端

二、子组件调用父组件方法

1、概述

在 Flutter 中,子组件可以通过回调函数的方式来调用父组件的方法。

2、代码实现

import 'package:flutter/material.dart';

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

  
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {

  late String name = "zibo";

  /// 子组件调用此方法实现修改 name
  /// @param newName 新的名字
  void changeName(String newName) {
    setState(() {
      name = newName;
    });
  }

  
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(name, style: const TextStyle(fontSize: 40)),
          const SizedBox(height: 10),
          SonWidget(changeName: changeName),
        ],
      ),
    );
  }
}

/// 子组件
class SonWidget extends StatefulWidget {
  const SonWidget({super.key, required this.changeName});

  final Function(String name) changeName;

  
  State<StatefulWidget> createState() => SonWidgetState();
}

class SonWidgetState extends State<SonWidget> {

  
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () => {
          // 调用父组件方法
          widget.changeName("訾博${DateTime.now().microsecondsSinceEpoch}"),
        },
        child: const Text("change name"),
      ),
    );
  }
}

3、效果

flutter 父组件调用子组件方法,Flutter,flutter,javascript,前端文章来源地址https://www.toymoban.com/news/detail-670440.html

到了这里,关于Flutter 父子组件互调方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3父子组件相互调用方法详解

    在vue3项目开发中,我们常常会遇到父子组件相互调用的场景,下面以setup语法糖格式详细聊聊父子组件那些事儿。

    2024年02月11日
    浏览(42)
  • 【Vue】父子组件传参 && 孙子调用爷爷的方法 provide inject

    一. 父传子 父组件先在data中定义要传给子组件的属性名 父组件在中引入子组件 在components中注册 使用步骤 3 中注册好的子组件 在 3 中,父传子 (1)利用 : 将父组件的对象、数组、字符串等传给子组件,供子组件使用 (2)利用 @ 将父组件的方法传给子组件,供子组件调用

    2024年02月08日
    浏览(48)
  • Flutter 调用原生(Android)方法以及数据传输

    flutter是一个UI框架,有许多方法和功能只能靠原生自己来调用,但是我们怎么通过flutter去间接调用呢?官方给出了两种方法 在平台通道之间进行消息传递: 注:消息和响应以异步的形式进行传递,以确保用户界面能够保持响应。 flutter端: 然后找到android工程,打开MainActi

    2024年02月10日
    浏览(52)
  • 项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法

    父组件 子组件: 方法一、通过子组件iframe1向父组件传值,再通过父组件向子组件iframe2传值可达到目的; 注意:模拟时 需要开启服务器,否则会出现跨域问题! 看图你应该就明白了 在项目中使用iframe引入html,引入的html中有路由跳转,当点击html页面中的路由跳转时,浏览器

    2024年02月01日
    浏览(47)
  • flutter和android互相调用、android原生项目与flutter module之间的交互、如何在flutter module中使用原生的方法

    bridge.dart MainActivity.kt MainActivity中 Flutter中 android项目依赖flutter module的方式网上有很多,这里就不做讲解。主要说一下这种情况下android如何与flutter module之间进行方法的调用 踩坑:期初我是想让flutter module调用它内部中的.android文件夹下的原生代码。.android文件夹下有Flutter、

    2023年04月08日
    浏览(45)
  • 小程序父子组件调用

    父组件向子组件传值 父通过属性传值 子组件通过properties接收 子组件调用父组件方法 父组件传递方法 父组件定义方法 子组件调用父组件方法 父组件调用子组件的方法 组件设置唯一ID name id=\\\"name\\\"/name 父组件声明周期中获取组件ID,一般放在onReady中 父组件调用子组件方法

    2024年02月12日
    浏览(30)
  • Flutter 笔记 | Flutter 布局组件

    布局类组件都会包含一个或多个子组件,布局类组件都是直接或间接继承 SingleChildRenderObjectWidget 和 MultiChildRenderObjectWidget 的Widget,它们一般都会有一个 child 或 children 属性用于接收子 Widget。 不同的布局类组件对子组件排列(layout)方式不同,如下表所示: Widget 说明 用途

    2024年02月06日
    浏览(51)
  • flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge

    flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge 在使用webview中,需要实现flutter与Javascript交互,在使用webview_flutter插件的时候,整理了一下webview与Javascript的交互JSBridge,具体可以查看 https://blog.csdn.net/gloryFlow/article/details/131683122 这里使用inappwebview插件来实现flutter与

    2024年02月08日
    浏览(48)
  • Flutter 笔记 | Flutter 可滚动组件

    我们介绍过 Flutter 有两种布局模型: 基于 RenderBox 的盒模型布局。 基于 Sliver ( RenderSliver ) 按需加载列表布局。 之前我们主要了解了盒模型布局组件,下面学习基于 Sliver 的布局组件。 通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大;如果要一次性将子组件

    2024年02月06日
    浏览(49)
  • Flutter开发笔记:Flutter 布局相关组件

    Flutter开发笔记 Flutter 布局与布局组件 - 文章信息 - Author: Jack Lee (jcLee95) Visit me at: https://jclee95.blog.csdn.net Email: 291148484@163.com. Shenzhen China Address of this article: https://blog.csdn.net/qq_28550263/article/details/131419782 【介绍】:本文介绍Flutter 布局相关组件。 Flutter 中提供了丰富的原生布局组

    2024年02月11日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包