FLutter父子组件通信

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

RN

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

1父组件类中
2<MenuItem title={'新手指引'} img={'新手指引'} click = {() => {
3    
4}}/>
5子组件类
6<Image
7                    style={styles.image}
8                    source={{uri:this.props.img}}
9                    resizeMode={'center'}
10                />
11<TouchableOpacity onPress={this.props.onPressFirst} >
12

Flutter

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

1//子组件
2import 'package:flutter/material.dart';
3
4class ProductControl extends StatelessWidget {
5   // 声明一个方法成员方法 
6    final Function addProduct;
7  //保存传递来方法(引用)
8  ProductControl(this.addProduct);
9  @override
10    Widget build(BuildContext context) {
11      // TODO: implement build
12      return RaisedButton(
13          child: Text("add Product"),
14          onPressed: (){
15            //通过这个方法引用找到回调方法调用
16            addProduct('hhh');
17          },
18        );
19    }
20  
21}
22//父组件
23//回调函数
24  void _addProduct(String product) {
25    //通知刷新
26    setState(() {
27  
28      _products.add(product);
29      print(product);
30    });
31  }
32  @override
33  Widget build(BuildContext context) {
34    print('[ProductsManager State] build');
35    return (Column(children: [
36      Container(
37        padding: EdgeInsets.all(10.0),
38        //传递回调函数(引用)给子组件
39        child: ProductControl(_addProduct),
40      ),
41      Products(_products)
42    ]));
43  }
44

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