FLutter组件通信(1)

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

//后续会讲 页面之间传值