前言
如果想实现该页面底部的模块
image
我本来是用的下面这种最原始的办法的，类似的代码写了四遍
image
后经人指点，做个封装吧（我本来没想在这个阶段做封装的，但没办法，有小哥哥说我这是"令人窒息的操作"，哈哈哈，那就硬着头皮试试封装吧），在此做个笔记
直接上代码
抽出公共部分
import 'package:flutter/material.dart';
class BottomComponent extends StatefulWidget {
final IconData icons;
final MaterialColor color;
final String btnName;
final GestureTapCallback onTap;
BottomComponent(
{@required this.icons,
@required this.btnName,
this.color = Colors.grey,
this.onTap});
@override
State<BottomComponent> createState() {
return BottomComponentState();
}
}
class BottomComponentState extends State<BottomComponent> {
@override
Widget build(BuildContext context) {
return GestureDetector(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(widget.icons, color: widget.color),
Text(widget.btnName, style: TextStyle(color: widget.color))
],
),
onTap: widget.onTap,
);
}
}
目标页面底部的部分
import 'BottomComponent.dart';
//……省略无关代码……
bottomNavigationBar: BottomAppBar(
child: Container(
height: 60.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
BottomComponent(//这里BottomComponent都使用了默认的颜色，所以只传了两个必要的参数
icons: Icons.monetization_on,
btnName: '赞赏',
),
BottomComponent(
icons: Icons.comment,
btnName: '评论',
),
BottomComponent(
icons: Icons.favorite_border,
btnName: '喜欢',
),
BottomComponent(
icons: Icons.share,
btnName: '分享',
),
],
),
),
),
//……省略无关代码……
关键点
方法一
这里用到了required，为比传的参数，查看很多控件的源码都有这样的设置，colors默认值就为Colors.grey，然后如果不想要默认值则可以自己传一个，比如：
bottomNavigationBar: BottomAppBar(
child: Container(
height: 60.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
BottomComponent(//这里BottomComponent都使用了默认的颜色，所以只传了两个必要的参数
icons: Icons.monetization_on,
btnName: '赞赏',
),
BottomComponent(
icons: Icons.comment,
btnName: '评论',
),
BottomComponent(
icons: Icons.favorite_border,
btnName: '喜欢',
color: Colors.red,//这里如果不想用默认值，则可以自己传一个
),
BottomComponent(
icons: Icons.share,
btnName: '分享',
),
],
),
),
),
方法二
将BottomComponent的构造方法写成
BottomComponent(this.icons, this.btnName, {this.color= Colors.grey, this.onTap});
这种更方便，使用的时候还不用写参数名
BottomComponent(
Icons.favorite_border,
'喜欢',
)
其实这个就是利用了dart中的可选参数的知识点
比如：
//可选参数必须在必选参数后面
void main() {
//必填的参数不用写参数名，可选的参数必须要写参数名，而且可以跳过一些参数，不按顺序传，只要参数名对得上就可以了，这种方式用得比较多
printPerson1("zoey");
printPerson1("zoey", age: 20);
printPerson1("zoey", age: 20, gender: "female");
printPerson1("zoey", gender: "female",age: 20);
printPerson1("zoey", gender: "female");
print("-----------------------");
//根据参数的位置，默认的进行传参，但不能跳过某个参数
printPerson2("allen");
printPerson2("allen", 20);
printPerson2("allen", 20, "male");
}
//可选命名参数，其中直接赋值的为初始默认值，如果不给默认值的话，不传该参数的话，会为null，给了默认值的话，不传，就会直接使用默认值
printPerson1(String name, {int age=30, String gender="FEMALE"}) {
print("name=$name,age=$age,gender=$gender");
}
//可选位置参数
printPerson2(String name, [int age=18, String gender="MALE"]) {
print("name=$name,age=$age,gender=$gender");
}
打印结果就是：
name=zoey,age=30,gender=FEMALE
name=zoey,age=20,gender=FEMALE
name=zoey,age=20,gender=female
name=zoey,age=20,gender=female
name=zoey,age=30,gender=female
-----------------------
name=allen,age=18,gender=MALE
name=allen,age=20,gender=MALE
name=allen,age=20,gender=male
最后，如果所有的参数，最外层被一个大的花括号括起来了，表明可以直接传一个对象进来
