一篇文章搞懂flutter父子组件传值的问题

父组件向子组件传值

父组件向子组件正向传值时，只需要在父组件调用子组件的时候写入参数即可；子组件通过widget.name来接收值即可。

父组件：
import 'package:flutter/material.dart';
import 'package:demo/child/child.dart';
class Demo extends StatefulWidget {
  const Demo({Key key}) : super(key: key);
  final String name = "";
  @override
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle:true,
        title: Text('父组件给子组件传值'),
      ),
      body: Center(
          child: Column(
              children: [
                Child(name:'你好我是子组件'),//子组件
              ],
          ),
      ),
    );
  }
}
子组件
import 'package:flutter/material.dart';
class Child extends StatefulWidget {
  const Child({Key key,this.name}) : super(key: key);
  final String name;
  @override
  State<Child> createState() => _ChildState();
}

class _ChildState extends State<Child> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child:Center(
          child:Text(
            '子组件接收到的值：${ widget.name}',
            style: TextStyle(
              color:Colors.grey,
              fontWeight: FontWeight.w300,
              fontSize: 16,
            ),
          ),
      )
    );
  }
}

子组件向父组件传值

子组件向父组件传值的时候需要通过回调函数callBack；子组件通过widget.callBack('我是父组件')这样的形式给父组件传值，父组件通过回调函数onChange接收值。接收的值需要setState来重新rebuild父组件。

import 'package:flutter/material.dart';
import 'package:demo/child/child.dart';
class Demo extends StatefulWidget {
  const Demo({Key key}) : super(key: key);
  @override
  State<Demo> createState() => _DemoState();
}
class _DemoState extends State<Demo> {
  String name = "";
  void onChange(String value){
    setState(() {
      name = value;
    });

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle:true,
        title: Text('子组件给父组件传值'),
      ),
      body: Center(
          child: Column(
              children: [
                Child(callBack: onChange),
                Text(name, style:TextStyle(
                      color:Colors.red,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    )
                )
              ],
          ),
      ),
    );
  }
}
子组件
```
import 'package:flutter/material.dart';
class Child extends StatefulWidget {
  const Child({Key key,this.callBack}) : super(key: key);
  final callBack;
  @override
  State<Child> createState() => _ChildState();
}

class _ChildState extends State<Child> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child:GestureDetector(
        onTap: () => widget.callBack('我是父组件'),
        child:Text(
            '点击',
            style:TextStyle(
              color:Colors.red,
              fontSize: 32,
              fontWeight: FontWeight.bold,
            )
        ),
      )

    );
  }
}
```

点击之后子组件传值给父组件，如图所示：