前言

如果想实现该页面底部的模块

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

最后，如果所有的参数，最外层被一个大的花括号括起来了，表明可以直接传一个对象进来