为了账号安全,请及时绑定邮箱和手机立即绑定

Flutter自定义组件-MultiShower

标签:
CSS3

1. 先说需求

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

图片描述

本文你可以学到:

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


2.MultiShower的使用

2.1:测试1-TextDecoration

图片描述

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

可指定容器的宽高和颜色
图片描述

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

这如果一个一个测试出来,还不累死人
图片描述

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

可以自定义下发的文字
图片描述

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,
    );
  }
}
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
21
获赞与收藏
57

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消