Flutter资源扫描插件assets_scanner_plus的使用

Flutter资源扫描插件assets_scanner_plus的使用

介绍

在Flutter中，你需要使用图片路径来加载图片，例如 AssetImage('graphics/background.png')。然而，这种方法容易出错，比如路径拼写错误，只有在程序运行后才能发现这种错误，并且通过路径可能无法直观地知道这是哪张图片。Assets Scanner可以帮助你为资源生成常量，减少拼写错误的概率。同时，你可以将鼠标悬停在常量上以更直观地预览图片。

使用方法

1. 在你的 pubspec.yaml 文件中添加以下内容：

dev_dependencies:
    assets_scanner_plus: ^1.0.0

1. 然后运行命令 flutter packages pub run build_runner build，assets_scanner_plus 会在 lib/ 目录下为你生成一个 r.dart 文件，如下所示：

/// GENERATED BY assets_scanner_plus. DO NOT MODIFY BY HAND.
/// See more detail on https://github.com/amorenew/assets_scanner_plus.
class R {
  static const package = "example";

  /// ![](.../assets_scanner_plus/example/assets/baseline_3d_rotation_white.png)
  static const baseline_3d_rotation_white = "assets/baseline_3d_rotation_white.png";

// ignore_for_file:lines_longer_than_80_chars,constant_identifier_names
}

注意：

• 对于包资源，它会根据包名生成另一个类。
• 如果资源名称不是合法的Dart标识符，非法字符会被转换成 _，例如资源名称 2TXsXk.jpg!w1280h1000.jpg 会生成属性名称 r_2TXsXk_jpg_w1280h1000。

现在，你可以通过将鼠标悬停在常量上来预览图片资源：

自定义 assets_scanner_plus_options.yaml

默认情况下，assets_scanner_plus 会在 lib/ 目录下生成 r.dart 文件，类名为 R 等。你可以通过添加一个 assets_scanner_plus_options.yaml 文件来自定义一些选项，支持的键列表如下：

• path: r.dart 文件的位置路径。请注意，path 应该是 lib/ 的子路径。
• className: r.dart 类的名称。
• ignoreComment: 指示是否生成注释。请注意，如果 ignoreComment 为 true，则无法预览图片资源。

以下是 assets_scanner_plus_options.yaml 文件的示例：

# assets_scanner_plus_options.yaml

path: "lib/src"
className: "MainAssets"
ignoreComment: true

完整示例 Demo

下面是一个完整的示例，展示如何使用 assets_scanner_plus 插件：

// Copyright (C) 2024 amorenew
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import 'package:example/src/r.dart'; // 引入生成的 r.dart 文件
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

// 忽略公共成员API文档
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用程序的主题。
        primarySwatch: Colors.blue,
      ),
      home: const Scaffold(
        backgroundColor: Colors.blue,
        body: SafeArea(
          child: Center(
            child: Column(
              children: <Widget>[
                Image(
                  image: AssetImage(R.alarm_white), // 使用生成的常量加载图片
                ),
                Image(
                  image: AssetImage(R.baseline_3d_rotation_white), // 使用生成的常量加载图片
                ),
                Image(
                  image: AssetImage(R.arrow_right_alt_white), // 使用生成的常量加载图片
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}