[Flutter] UI调试小工具——颜色吸管-EW帮帮网

使用颜色吸管工具提升UI开发效率

作为客户端开发，在应用交付之前，一般都会有UI走查这一环节。一方是对颜色不敏感的开发，另一方是对颜色十分敏感的视觉，是否经常出现下列对话:

视觉: 你这个颜色是不是和我设计的不太一样。
开发: 哪里不一样，这个跟设计稿的颜色一模一样。
视觉: 设计稿明明是伸手不见五指的黑，你这个黑的不够纯正。
开发: 你别走，等我看下代码…

看代码，不失为一个办法。但是如果你在其他的分支，你需要先stash本地代码，再切分支，看代码，找颜色…这个时候，是不是特别想有一个工具，可以立马查看实际显示的颜色。

颜色吸管工具的实现原理

制作一个颜色吸管工具需要三个核心步骤：

获取当前屏幕颜色
选取指定位置
颜色输出

1. 获取所有像素点的颜色

获取当前屏幕的所有像素点颜色可以通过截屏实现。Flutter提供了RepaintBoundary Widget，只需将内容用RepaintBoundary包裹起来：

Widget build(BuildContext context) {
  return RepaintBoundary(
    key: _key,
    child: Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(),
    ),
  );
}

在需要截屏的地方，通过_key获取到指定RenderRepaintBoundary，就可以直接转化为图片。

2. 获取指定像素点的颜色

将截屏得到的图片通过Image.memory()方法展示出来，加上GestureDetector widget，在onPanUpdate或onTapUp方法中可以获取到当前的offset。使用image库的getPixelSafe()方法，传入x、y值就可以获得当前位置的颜色值。

3. 放大选中位置

在Flutter中，可以通过ImageFilter来实现图片放大效果。使用ImageFilter.matrix()对图片的纹理做矩阵变换来实现放大效果。

提升开发效率的工具推荐

在实际开发中，除了自定义工具外，使用专业的开发工具也能大幅提升效率。比如iOS开发者可以使用appuploader这款iOS开发助手，它提供了：

快速打包和上传应用
证书管理功能
设备UDID管理
测试版本分发

这类工具能帮助开发者节省大量时间，让开发者更专注于核心功能的实现和UI细节的打磨。

开发中遇到的问题及解决方案

颜色编码问题

在获取图片颜色时，获取到的实际是AABBGGRR颜色类型，而Flutter一般使用的是AARRGGBB颜色类型，需要进行转换：

int _abgrToArgb(int oldValue) {
  int newValue = oldValue;
  newValue = newValue & 0xFF00FF00;
  newValue = ((oldValue & 0xFF) << 16) | newValue;
  newValue = ((oldValue & 0x00FF0000) >> 16) | newValue;
  return newValue;
}

设备像素比问题

在截图时需要传入设备像素比，获取触摸点时也要考虑像素比的影响。

UI开发的未来趋势

未来的UI自动化验收将是AI识别为主的自动验收模式和人工测量为主的个性化验收模式相结合。在页面结构清晰的页面以自动验收为主，在复杂的页面以人工验收为主，这样才能做到效率和准确度的最佳平衡。

技术是为了解决业务问题的，只有在实现业务、给人们带来便利的前提下，技术的存在才有意义。无论是自定义工具还是专业开发工具如appuploader，最终目的都是提升开发效率，创造更好的产品体验。

[Flutter] UI调试小工具——颜色吸管