父子组件传参有两种方法（个人推荐第一种）

方法一：

子组件：

关键性代码：

image

注释：centerTitle、leftTitle、icon代表需要传的参数，leftTitle给予一个默认值返回，代表没传时的值默认为返回

如何使用这3个参数？

image

image

直接widget.leftTitle 即可获取到leftTitle的值 注意：widget是小写开头的。

可选参数与必选参数？

必选参数：直接在定义的变量前加@require即可。如图：

image

这样写代表centerTitle是必须传的

可选参数：第一种写法 没加@require都是代表是可选的参数

到这里准备工作全部做好了，现在父组件来使用子组件

父组件使用子组件：

①引入子组件（路径可能不一样根据你们自己的路径来）

image

②使用

image

image

我这里只传了centerTitle和icon的值，leftTitle的值没传，直接使用了默认值返回。效果如图：

image

这是我自己写的导航栏组件，完整代码如下：
子组件：NarBar

import 'package:flutter/material.dart';
import 'dart:ui';

class NarBar extends StatefulWidget {
  final String leftTitle;
  final String centerTitle;
  final Widget icon;

 // 写法一： NarBar(this.centerTitle,[this.leftTitle="返回",this.icon]); // 可选参数用[]包裹起来 可选参数一定要放置于必选参数的后面
  NarBar({this.centerTitle,this.leftTitle="返回",this.icon}); // 写法二 推荐这种写法 必填参数 直接加个@required即可

  @override
  _NarBarState createState() => _NarBarState();
}

class _NarBarState extends State<NarBar> {
  void _navigateMe(BuildContext context) {
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    var _mediaWidth = MediaQuery.of(context).size.width; // 屏幕宽度
    var _appBarHeight = MediaQueryData.fromWindow(window).padding.top;// 默认
    return Container(
      child: new Row(
        children: <Widget>[
          new Container(
            child: new Row(
              children: <Widget>[
                new IconButton(
                  icon: new Image.asset(
                    "images/me_imgs/back.png",
                    width: 25.0,
                    height: 25.0,
                  ),
                  onPressed: () {
                    _navigateMe(context);
                  },
                  padding: EdgeInsets.all(0),
                ),
                new Text(
                  widget.leftTitle,
                  style: new TextStyle(
                      color: Color.fromRGBO(0, 0, 0, 1), fontSize: 14.0),
                )
              ],
            ),
            width: _mediaWidth / 3,
          ),
          Container(
            child: new Text(
             widget.centerTitle,
              style: new TextStyle(color: Colors.black, fontSize: 17.0),
            ),
            width: _mediaWidth / 3,
            alignment: Alignment.center,
          ),
          Container(
            width: _mediaWidth / 3,
            child: widget.icon,
           alignment: Alignment.centerRight,
           padding: EdgeInsets.only(right: 16.0),
          )
        ],
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
      ),
      width: _mediaWidth,
      height: 55.0,
      color: Colors.white,
      margin: EdgeInsets.only(top: _appBarHeight),
    );
  }
}

父组件：

import 'package:flutter/material.dart';
import 'package:tongtu_app/components/navBar.dart';

class WriteNote extends StatefulWidget {
  @override
  _WriteNoteState createState() => _WriteNoteState();
}

class _WriteNoteState extends State<WriteNote> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Column(
        children: <Widget>[
          new NarBar(
            centerTitle: "写笔记",
            icon: new GestureDetector(
              child: new Text(
                "完成",
                style: new TextStyle(
                    color: Color.fromRGBO(204, 41, 41, 1), fontSize: 14.0),
              ),
            ),
          ),
        ],
      ),
      backgroundColor: Colors.white,
    );
  }
}

最终效果：

image.png

第二种写法：

image.png

其他的与方法一相同
注释：可选参数用[]包裹起来 可选参数一定要放置于必选参数的后面
推荐第一种方法的原因：
例子：我写的这个子组件，有两个可选参数，要是项目中只需要要使用第二个可选参数，而第一个不需要，传参的时候，只传第二参数会报数，一定要传完第一个可选参数才能传第二个可选参数，这种体现很不好。
第一次写，可能表达的不清楚，见谅哈。有什么问题，随时欢迎私聊哦