Flutter系列 - 子组件向父组件传值(flutter子组件向父组件传值)

Flutter子组件向父组件传值

需求: 点击子组件的按钮, 改变父类的背景色

方法: 使用系统回调函数ValueChanged

在子组件内定义回调函数名称

 ChildView({this.changeColorCallBack});
 final ValueChanged<Color> changeColorCallBack;

注意ValueChanged要指定泛型

在父组件使用

 child: ChildView(changeColorCallBack: (color) {
       setState(() {
              _myColor = color;
       });
  },)

1 改变前

2 改变后

完整代码

class ParentView extends StatefulWidget {
  @override
  _ParentState createState() => _ParentState();
}

class _ParentState extends State<ParentView> {

  Color _myColor = Colors.grey;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(80),
      height: 300,
      width: 300,
      color: _myColor,
      child: Column(
        children: <Widget>[
          Text('父类'),
          ChildView(changeColorCallBack: (color) {
            setState(() {
              _myColor = color;
            });
          },)
        ],
      )
    );
  }
}

class ChildView extends StatelessWidget {

  ChildView({this.changeColorCallBack});
  final ValueChanged<Color> changeColorCallBack;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 130,
      height: 40,
      margin: EdgeInsets.all(80),
      color: Colors.greenAccent,
      child: InkWell( 
        child: Text('把父类改为红色'),
        onTap: () {
          changeColorCallBack(Colors.red);
        },
      ),
    );
  }
}

方法2 使用Function

class ParentPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ChildPage(
        callBack: (text) {
          print('子组件的值是: ' + text); 
        },
      ),
    );
  }
}

class ChildPage extends StatelessWidget {

  ChildPage({this.callBack});
  final Function callBack;
  
  @override
  Widget build(BuildContext context) {
    return Container(
      child: InkWell(
        onTap: () {
          this.callBack('大家好');
        },
        child: Text('点击传值给父组件'),
      ),
    );
  }
}