Flutter自定义组件-MultiShower

Flutter中有多如牛毛的控件，控件有多如牛毛的属性，属性又有多如牛毛的枚举或静态常量
是不是想想都头皮发麻，TM这么多我怎么玩。在思考如何玩转属性，然后便有此文。

本文你可以学到:

[1].自定义无状态组件的流程
[2].回调方法的使用
[3].如何批量生成你想要的组件
[4].清晰认识:TextDecoration、BoxFit、BlendMode、Alignment

var decorations = [TextDecoration.none,TextDecoration.lineThrough,
  TextDecoration.overline,TextDecoration.underline];

var show = MultiShower(
    decorations, (type) => Text("张风捷特烈",
   style: TextStyle(
fontSize: 20, //字号
decoration: type),
 ));

可指定容器的宽高和颜色

var fitModes = [BoxFit.none,BoxFit.contain,BoxFit.cover,
  BoxFit.fill,BoxFit.fitHeight,BoxFit.fitWidth,BoxFit.scaleDown];

var show = MultiShower(
  fitModes,
  (type) => Image(
    image: AssetImage("images/wy_300x200.jpg"),
    fit: type,
  ),
  width: 150,//容器宽
  color: Colors.red,//容器颜色
);

这如果一个一个测试出来，还不累死人

//叠合模式数组
var colorBlendModes = [
  BlendMode.clear,BlendMode.src,BlendMode.dst,
  BlendMode.srcOver,BlendMode.dstOver,BlendMode.srcIn,
  BlendMode.dstIn,BlendMode.srcOut,BlendMode.dstOut,
  BlendMode.srcATop,BlendMode.dstATop,BlendMode.xor,
  BlendMode.plus, BlendMode.modulate,BlendMode.screen,
  BlendMode.overlay,BlendMode.darken,BlendMode.lighten,
  BlendMode.colorDodge,BlendMode.colorBurn,BlendMode.hardLight,
  BlendMode.softLight,BlendMode.difference,BlendMode.exclusion,
  BlendMode.multiply,BlendMode.hue,BlendMode.saturation,
  BlendMode.color, BlendMode.luminosity,
];

var show = MultiShower(
  colorBlendModes,
      (mode) => Image(
 image: AssetImage("images/icon_head.png"),
 color: Colors.blue,
 colorBlendMode: mode,
      ),
  width: 60,
  height: 60,
);

可以自定义下发的文字

var alignments = [
  Alignment.center, Alignment.centerLeft, Alignment.centerRight,
  Alignment.topCenter, Alignment.topLeft, Alignment.topRight,
  Alignment.bottomCenter, Alignment.bottomLeft, Alignment.bottomRight,
  Alignment(0, 0), Alignment(0.5, 0.5)
];

var alignmentInfos = [//下面的文字
  "center", "centerLeft", "centerRight",
  "topCenter", "topLeft", "topRight", "bottomCenter", "bottomLeft", "bottomRight",
  "Alignment(0,0)", "Alignment(0.5,0.5)"
];

var show = MultiShower(
  alignments,
      (mode) => Align(
 alignment: mode,
 child: Container(
   width: 40,
   height: 40,
   color: Colors.red,
 ),
      ),
  infos: alignmentInfos,
  width: 100,
);

看起来好像很厉害的感觉，如何实现的呢?

继承StatelessWidget需要实现build抽象方法，返回Widget对象

import 'package:flutter/material.dart';

class MultiShower extends StatelessWidget {
  MultiShower();

  @override
  Widget build(BuildContext context) {
    return null;
  }
}

import 'package:flutter/material.dart';

class MultiShower extends StatelessWidget {
  MultiShower(
    this.list,
    this.call, {
    this.width = 110,
    this.height = 110 * 0.618,
    this.infos,
    this.color = Colors.cyanAccent,
  });

  final List list;
  final List infos;
  final Function call;
  final double width;
  final double height;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return null;
  }
}

核心就是在遍历列表时回调出来列表元素，以供使用。

@override
Widget build(BuildContext context) {
  var li = [];
  for (var i = 0; i < list.length; i++) {
    var child = Container(
 margin: EdgeInsets.all(7),
 color: color,
 width: width,
 height: height,
 child: call(list[i]));
    li.add(Column(
      children: [
 child,
 Text(infos != null ? infos[i] : list[i].toString().split(".")[1])
      ],
    ));
  }
  return Wrap(
    children: li,
  );
}

好了，这样就OK了，是不是没有想象中的那么难，最后贴个完整的

import 'package:flutter/material.dart';

class MultiShower extends StatelessWidget {
  MultiShower(
    this.list,
    this.call, {
    this.width = 110,
    this.height = 110 * 0.618,
    this.infos,
    this.color = Colors.cyanAccent,
  });

  final List list;
  final List infos;
  final Function call;
  final double width;
  final double height;
  final Color color;

  @override
  Widget build(BuildContext context) {
    var li = [];
    for (var i = 0; i < list.length; i++) {
      var child = Container(
   margin: EdgeInsets.all(7),
   color: color,
   width: width,
   height: height,
   child: call(list[i]));
      li.add(Column(
 children: [
   child,
   Text(infos != null ? infos[i] : list[i].toString().split(".")[1])
 ],
      ));
    }
    return Wrap(
      children: li,
    );
  }
}