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 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦