本文介绍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的更加接近面向对象语法,变量或函数作为函数参数.