文档章节

FLutter父子组件通信

她吃西红柿
 她吃西红柿
发布于 2018/08/23 14:37
字数 355
阅读 683
收藏 0

本文介绍flutter父子组件数据传递和回调. 还是以之前的代码为例Flutter_DayByDay由于之前用React-Native写项目,顺便对比一下

RN

父组件直接在xml标签中写属性={值/方法},子组件通过props去取属性和方法

父组件类中
<MenuItem title={'新手指引'} img={'新手指引'} click = {() => {
    
}}/>
子组件类
<Image
                    style={styles.image}
                    source={{uri:this.props.img}}
                    resizeMode={'center'}
                />
<TouchableOpacity onPress={this.props.onPressFirst} >

Flutter

这里将之前RaisedButton组件再做一次抽取

//子组件
import 'package:flutter/material.dart';

class ProductControl extends StatelessWidget {
   // 声明一个方法成员方法 
    final Function addProduct;
  //保存传递来方法(引用)
  ProductControl(this.addProduct);
  @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return RaisedButton(
          child: Text("add Product"),
          onPressed: (){
            //通过这个方法引用找到回调方法调用
            addProduct('hhh');
          },
        );
    }
  
}
//父组件
//回调函数
  void _addProduct(String product) {
    //通知刷新
    setState(() {
  
      _products.add(product);
      print(product);
    });
  }
  @override
  Widget build(BuildContext context) {
    print('[ProductsManager State] build');
    return (Column(children: [
      Container(
        padding: EdgeInsets.all(10.0),
        //传递回调函数(引用)给子组件
        child: ProductControl(_addProduct),
      ),
      Products(_products)
    ]));
  }

两者设计思路类似,flutter的更加接近面向对象语法,变量或函数作为函数参数.

© 著作权归作者所有

下一篇: OC对象本质
她吃西红柿
粉丝 43
博文 52
码字总数 25812
作品 0
杭州
iOS工程师
私信 提问
flutter基础-组件通信(父子、兄弟)

上一篇中讲了如何通过父组件给子组件传值: 传送门 这一篇的内容会讲述如何实现: 1. 父子组件之间的传值方法 2. 兄弟组件之间的传值方法 —— eventbus 实现后的效果如下图, 实现效果.png ...

飞翔的熊blabla
2018/10/29
0
0
Flutter基础-组件通信(父子、兄弟)

上一篇中讲了如何通过父组件给子组件传值: 传送门 这一篇的内容会讲述如何实现: 1. 父子组件之间的传值方法 2. 兄弟组件之间的传值方法 —— eventbus 实现后的效果如下图, 实现效果.png ...

大灰狼的小绵羊哥哥
2018/08/30
0
0
Android 集成 Flutter 及通信交互详解

前不久开源了用Flutter开发的一个音视频类App客户端,欢迎大家star, fork。 ⚠️ 项目地址:github.com/songxiaolia… ⚠️ 本篇博客涉及的源码全部开源在Github,地址:github.com/songxiao...

Songlcy
05/24
0
0
详解如何实现一个简单的 vuex

首先我们需要知道为何要使用 vuex。父子组件通信用 prop 和自定义事件可以搞定,简单的非父子组件通信用 bus(一个空的 Vue 实例)。那么使用 vuex 就是为了解决复杂的非父子组件通信。 仅仅...

嫣然丫丫丫
2018/12/12
0
0
Flutter基础(十三)Flutter与Android的相互通信

本文首发于公众号「刘望舒」 ReactNative入门系列 React Native组件 Flutter基础系列 前言 本来这篇文章应该讲一下Flutter的插件开发,但是在插件开发的基础是PlatformChannel,也就是Flutt...

刘望舒
08/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 你已经是个成熟的熊猫了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Sharon啊 :#今日歌曲推荐# 分享黑鸭子的单曲《羞答答的玫瑰静悄悄的开》 《羞答答的玫瑰静悄悄的开》- 黑鸭子 手机党少年们想听歌,请使劲儿...

小小编辑
7分钟前
16
4
结合Spring Security进行web应用会话安全管理

在本文中,将为大家说明如何结合Spring Security 和Spring Session管理web应用的会话。 一、Spring Security创建使用session的方法 Spring Security提供4种方式精确的控制会话的创建: alwa...

fightinging
13分钟前
2
0
83、Mybatis和Hibernate重要区别

Mybatis;入门简单,程序容易上手开发,节省开发成本。Mybatis需要程序猿自己编写sql语句,是一个不完全的ORM框架,对sql修改和优化非常容易实现。 Mybatis适合开发需求变更频繁的系统,比如...

lianbang_W
今天
5
0
设计模式之状态模式

定义 Allow an object to alter its behavior when its internal state changes.The object will appear to change its class.(当一个对象内在状态改变时允许其改变行为,这个对象看起来像改...

陈年之后是青葱
今天
6
0
Python常用模块之os.path

os.path.abspath(path) 输入相对路径,返回绝对路径 Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 27 2018, 04:59:51) [MSC v.1914 64 bit (AMD64)] on win32Type "copyright", "credits" or "lic......

松鼠大帝
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部