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