Flutter自定义组件-MultiShower

1. 先说需求

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

image

本文你可以学到:

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

2.MultiShower的使用

2.1:测试1-TextDecoration

image

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

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

2.2:测试2-BoxFit

可指定容器的宽高和颜色

image

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,//容器颜色
);

2.3:测试3-BlendMode

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

image

//叠合模式数组
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,
);

2.4:测试4-Alignment

可以自定义下发的文字

image

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,
);

3.组件的实现

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

3.1:定义MultiShower类继承自StatelessWidget

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

import 'package:flutter/material.dart';

class MultiShower extends StatelessWidget {
  MultiShower();

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

3.2:确定属性和入参

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<String> infos;
  final Function call;
  final double width;
  final double height;
  final Color color;

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

3.3:实现build方法

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

@override
Widget build(BuildContext context) {
  var li = <Widget>[];
  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: <Widget>[
        child,
        Text(infos != null ? infos[i] : list[i].toString().split(".")[1])
      ],
    ));
  }
  return Wrap(
    children: li,
  );
}

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

4.全类展示

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<String> infos;
  final Function call;
  final double width;
  final double height;
  final Color color;

  @override
  Widget build(BuildContext context) {
    var li = <Widget>[];
    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: <Widget>[
          child,
          Text(infos != null ? infos[i] : list[i].toString().split(".")[1])
        ],
      ));
    }
    return Wrap(
      children: li,
    );
  }
}

本文到此接近尾声了，另外本人有一个Flutter微信交流群，欢迎小伙伴加入，共同探讨Flutter的问题，
本人微信号:zdl1994328，期待与你的交流与切磋。如果想快速尝鲜Flutter，《Flutter七日》会是你的必备佳品。