Flutter自定義元件-MultiShower

張風捷特烈發表於2019-07-12
Flutter元件

1. 先說需求

Flutter中有多如牛毛的控制元件，控制元件有多如牛毛的屬性，屬性又有多如牛毛的列舉或靜態常量
是不是想想都頭皮發麻，TM這麼多我怎麼玩。在思考如何玩轉屬性，然後便有此文。

Flutter自定義元件-MultiShower

本文你可以學到:

[1].自定義無狀態元件的流程
[2].回撥方法的使用
[3].如何批量生成你想要的元件
[4].清晰認識:TextDecoration、BoxFit、BlendMode、Alignment
複製程式碼

2.MultiShower的使用

2.1:測試1-TextDecoration

Flutter自定義元件-MultiShower

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

可指定容器的寬高和顏色

Flutter自定義元件-MultiShower

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

這如果一個一個測試出來，還不累死人

Flutter自定義元件-MultiShower

//疊合模式陣列
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

可以自定義下發的文字

Flutter自定義元件-MultiShower

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七日》會是你的必備佳品。

相關文章