知是行之始，行是知之成。

前言

最近发生了好多事情，虽然这段时间收获不少，但是没有记录下来，就有种没有学到东西一样。尽量抽时间整理一下自己学到的，以便复习。

正文

前段时间一直在整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

小组件地址 传送门

后记

一个简单的小组件作为文章开始的地方。