flutter 图片自动化处理

在flutter项目开发中很烦的一点就是资源的使用
在使用时

• 首先需要我们添加资源到项目中
• 然后在使用的地方用手动拼写的图片名称

首先用手动拼写的字符串容易出错,其次是需要全部拼写出来,或者是有一个单独的文件来存储图片对应的资源名称,这样也是难于维护,图片删了,但是资源名还留着,图片多了,维护都是问题,为了解决这个痛点,就写了一个自动处理的方法
大体的思路就是获取到所有的图片文件,然后手动拼写存储图片名称的类代码,然后写入规定好的文件中(dart文件)
大概就是生成类似这样的文件

class LXCThemeData {
  static const homeToolGuideClose = "assets/res/images/home_tool_guide_close.png";
}

第一步:把我们的类写出来

void main(List<String> arguments) {
  const clsName = "LXCThemeData";
  StringBuffer warpper = StringBuffer();
  warpper.writeln("class $clsName {");
  warpper.writeln("}");
}

第二部:获取图片文件,这里需要注意的是我们一般都是在asset/images/下面放图片,但是很可能会对图片进一步分文件夹存储,所以需要对asset/images/进行递归遍历,以便把所有的图片都查找出来

writeImagePropertyToWarpper() {
  Directory directory = Directory("assets/res/images");

  //这个files中包含文件夹和文件,所以需要去除文件夹
  List<FileSystemEntity> files = directory.listSync(recursive: true);
  for (FileSystemEntity file in files) {
    if (file is File) {
      print("图片路径 = ${file.path}");
    }
  }
}

第三部: 将warpper传入,然后通过图片路径截取图片名称,一般在dart中文件使用""进行单词分割,而类中的属性一般都是驼峰命名法,所以这里需要多一步操作就是将""分割的图片名称转化为驼峰,然后拼接成

static const homeToolGuideClose = "assets/res/images/home_tool_guide_close.png";

writeImagePropertyToWarpper(StringBuffer warpper) {
  Directory directory = Directory("assets/res/images");

  //这个files中包含文件夹和文件,所以需要去除文件夹
  List<FileSystemEntity> files = directory.listSync(recursive: true);
  for (FileSystemEntity file in files) {
    if (file is File) {
      final imagePathString = file.path;
      var imageName = imagePathString.substring(imagePathString.lastIndexOf("/")+1,imagePathString.lastIndexOf("."));
      imageName = hump(imageName);
      warpper.writeln('  static const $imageName = "$imagePathString"');
    }
  }
}

String hump(String source) {
  return source.split("_").reduce((prev, next) {
    if (next.isNotEmpty) {
      next = next[0].toUpperCase() + next.substring(1);
    }
    return "$prev$next";
  });
}

此时在我的assets/res/images/ 下有一张图片home_tool_guide_close.png

382FE4C9-5277-4EC5-A86A-656F8848D852.png

void main(List<String> arguments) {
  const clsName = "LXCThemeData";
  StringBuffer warpper = StringBuffer();
  warpper.writeln("class $clsName {");
  writeImagePropertyToWarpper(warpper);
  warpper.writeln("}");
  print(warpper);
}

此时我们运行main函数,打印warpper结果为:

class LXCThemeData {
  static const homeToolGuideClose = "assets/res/images/home_tool_guide_close.png";
}

完美的拼出了我们想要的图片名称类
最后一步: 将这个类字符串写入到我们的dart文件中,我这里将它存放到了lib/theme/image_name.dart文件中

4B45E5C6-CAAC-4FA7-8FC3-E54AD397E9C3.png

void main(List<String> arguments) {
  const clsName = "LXCThemeData";
  StringBuffer warpper = StringBuffer();
  warpper.writeln("class $clsName {");
  writeImagePropertyToWarpper(warpper);
  warpper.writeln("}");
  try {
    File file = File("lib/theme/image_name.dart");
    file.writeAsString(warpper.toString());
  } catch(e) {
    print(e);
  }
}

此时运行main函数,就会将上边打印的类写入到image_name.dart文件中

E4D0E8D6-7A40-4F35-B399-F78022D856F7.png

到此,我们就自动化的将所有的图片资源管理起来了,之后如果删除图片,添加图片,重新运行main函数就可以同步这些资源,我们使用的石磊中的图片名称属性,如果图片被删除了,我们的代码也会第一时间反馈给你错误,是不是很方便呢