知是行之始，行是知之成。
前言
最近发生了好多事情，虽然这段时间收获不少，但是没有记录下来，就有种没有学到东西一样。尽量抽时间整理一下自己学到的，以便复习。
正文
前段时间一直在整Flutter项目中的架构、数据逻辑，比较少的开发UI。最近分配了一些UI写写，也挺开心。
iOS开发中这种图片、文字共存、还可设置图片位置的Button，一般都是用人家写的，也仔细看了人家的逻辑，有的写的还是比较复杂的，估计是iOS原生Button框架问题。在Flutter中，就想着自己撸一个。
这个小控件还是比较简单的，细想一下，也就四部分：控制方向、有图片、有文字、有间距。
- 图片、文字、间距
/// icon
final Widget icon;
/// text
final Widget text;
/// 间距
final double margin;
- 控制方向
enum TextIconButtonType {
imageLeft,
imageRight,
imageTop,
imageBottom,
}
- 水平方向用Row、垂直方向用Column
_row(Widget left, Widget right) {
return InkWell(
onTap: () {
if (onTap != null) {
onTap!();
}
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
left,
SizedBox(width: margin),
right,
],
),
);
}
_column(Widget top, Widget bottom) {
return InkWell(
onTap: () {
if (onTap != null) {
onTap!();
}
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
top,
SizedBox(height: margin),
bottom,
],
),
);
}
- 核心判断
switch (type) {
case TextIconButtonType.imageLeft:
widget = _row(icon, text);
break;
case TextIconButtonType.imageRight:
widget = _row(text, icon);
break;
case TextIconButtonType.imageTop:
widget = _column(icon, text);
break;
case TextIconButtonType.imageBottom:
widget = _column(text, icon);
break;
default:
widget = _row(icon, text);
}
效果如下：
TextIconButton.gif
小组件地址 传送门
后记
一个简单的小组件作为文章开始的地方。
