Flutter 利用@required简单实现自定义控件中的默认

前言

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

image

我本来是用的下面这种最原始的办法的，类似的代码写了四遍

image

后经前辈指点，让我做个封装（我本来没想在这个阶段做封装的，因为我感觉还啥都不会啊，但没办法，有小哥哥说我这是"令人窒息的操作"，哈哈哈，掩面流下了没技术的眼泪，那就硬着头皮试试封装吧），在此做个笔记

直接上代码

抽出公共部分

import 'package:flutter/material.dart';

class BottomComponent extends StatefulWidget {
  final IconData icons;
  final MaterialColor colors;
  final String btnName;

    //required为必传的参数，没有这个注解的为选传
  BottomComponent(
      {@required this.icons,
      this.colors = Colors.grey,
      @required this.btnName});

  @override
  State<BottomComponent> createState() {
    return new BottomComponentState();
  }
}

class BottomComponentState extends State<BottomComponent> {
  @override
  Widget build(BuildContext context) {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Icon(widget.icons, color: widget.colors),
        new Text(widget.btnName, style: new TextStyle(color:  widget.colors))
      ],
    );
  }
}

其实我本身是没有用required的，就是普通的构造函数，但用着用着发现使用的地方，颜色都一样的，没必要每次都再设置一下，但有些又有可能自己要单独设置，所以就想着有没有可能来多个构造函数，发现并不能啊，再查啊查，终于查到了这玩意儿，这样就满足需求了

目标页面底部的部分

import 'BottomComponent.dart';

//……省略无关代码……

bottomNavigationBar: new Container(
    width: 500.0,
    height: 60.0,
    color: Colors.white,
    child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
            new BottomComponent(//这里BottomComponent都使用了默认的颜色，所以只传了两个必要的参数
              icons: Icons.monetization_on,
              btnName: '赞赏',
            ),
            new BottomComponent(
              icons: Icons.comment,
              btnName: '评论',
            ),
            new BottomComponent(
              icons: Icons.favorite_border,
              btnName: '喜欢',
            ),
            new BottomComponent(
              icons: Icons.share,
              btnName: '分享',
            ),
        ],
    ),
)

//……省略无关代码……

关键点

这里用到了required，为必传的参数，查看很多控件的源码都有这样的设置，colors默认值就为Colors.grey，然后如果不想要默认值则可以自己传一个，比如：

bottomNavigationBar: new Container(
    width: 500.0,
    height: 60.0,
    color: Colors.white,
    child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
            new BottomComponent(
              icons: Icons.monetization_on,
              color:Colors.blue,//这里如果不想用默认值，则可以自己传一个
              btnName: '赞赏',
            ),
            new BottomComponent(
              icons: Icons.comment,
              btnName: '评论',
            ),
            new BottomComponent(
              icons: Icons.favorite_border,
              btnName: '喜欢',
            ),
            new BottomComponent(
              icons: Icons.share,
              btnName: '分享',
            ),
        ],
    ),
)