25

问题 我正在尝试在颤动屏幕的应用栏中添加注销图像图标。我创建了一个资产文件夹并创建了目录 images/icons/ 并在其中放置了图标。我在 pubspec.yaml 文件中提到了它们。我试图在 appbar 中实现资产图像，但它不起作用。

代码

pubspe.yaml


    name: mtrack_notifications
    description: Flutter application for MTrack Notifications 

    dependencies:
      flutter:
        sdk: flutter
      # The following adds the Cupertino Icons font to your application.
      # Use with the CupertinoIcons class for iOS style icons.
      cupertino_icons: ^0.1.2
      http: ^0.11.3+16
      shared_preferences: "^0.4.2"


    dev_dependencies:
      flutter_test:
        sdk: flutter


    # For information on the generic Dart part of this file, see the
    # following page: https://www.dartlang.org/tools/pub/pubspec

    # The following section is specific to Flutter.
    flutter:

      # The following line ensures that the Material Icons font is
      # included with your application, so that you can use the icons in
      # the material Icons class.
      uses-material-design: true

      # To add assets to your application, add an assets section, like this:
      # assets:
      #  - images/a_dot_burr.jpeg
      #  - images/a_dot_ham.jpeg
      assets:
      - assets/images/icons/like.png
      - assets/images/icons/logout.png
      # An image asset can refer to one or more resolution-specific "variants", see
      # https://flutter.io/assets-and-images/#resolution-aware.

      # For details regarding adding assets from package dependencies, see
      # https://flutter.io/assets-and-images/#from-packages

      # To add custom fonts to your application, add a fonts section here,
      # in this "flutter" section. Each entry in this list should have a
      # "family" key with the font family name, and a "fonts" key with a
      # list giving the asset and other descriptors for the font. For
      # example:
      # fonts:
      #   - family: Schyler
      #     fonts:
      #       - asset: fonts/Schyler-Regular.ttf
      #       - asset: fonts/Schyler-Italic.ttf
      #         style: italic
      #   - family: Trajan Pro
      #     fonts:
      #       - asset: fonts/TrajanPro.ttf
      #       - asset: fonts/TrajanPro_Bold.ttf
      #         weight: 700
      #
      # For details regarding fonts from package dependencies,
      # see https://flutter.io/custom-fonts/#from-packages

单击此处查看 IDE 屏幕截图

应用条码




    @override
      Widget build(BuildContext context) {
        //build a form widget using the form key we created above
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(StringRef.appName),
            actions: [

          new Center(
          child:new Text(
            userName,
            textScaleFactor: 1.5,
            style: new TextStyle(
              fontSize: 12.0,
              color: Colors.white,
            ),
          )),
          new IconButton(
            icon: new Icon(Icons.close),
            tooltip: 'Closes application',
            onPressed: () => exit(0),
          ),

          new IconButton(
            icon: new Image.asset('images/icons/logout.png'),
            tooltip: 'Closes application',
            onPressed: () => exit(0),
          ),

            ],
          ),
4

5 回答 5

52

问题出在您提供给IconButton.

应该是这样的。

Scaffold(
  appBar: AppBar(
    actions: [
      IconButton(
        icon: Image.asset('assets/images/icons/logout.png'),
        onPressed: () => exit(0),
      ),
    ],
  ),
)
于 2018-07-05T09:59:17.880 回答
4

根据Flutter 文档，您需要包含pubspec.yaml资产中指定的完整路径才能加载它：

Image.asset('assets/images/icons/logout.png')
于 2018-07-05T09:34:49.723 回答
3

这是Flutter中AppBar的示例代码，带有一个图标

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(
      title: new Text('App Name'),
      actions: [
        // action button
        IconButton(
          icon: Image.asset('assets/images/icons/logout.png'),
          onPressed: () { },
        ),

      ],
    ),
  );
}

不要忘记像这样asset为您的移动应用程序添加徽标pubspec.yaml，并将名为 logo.png 的图像添加到 assets 目录中。

flutter:
  assets:
    - assets/images/icons/logout.png

注意：该assets部分的flutter小节指定应包含在应用程序中的文件。pubspec.yaml每个资产由资产文件所在的显式路径（相对于文件）标识。声明资产的顺序无关紧要。使用的实际目录名称（assets在第一个示例中或directory在上面的示例中）无关紧要。

在构建过程中，Flutter 将资产放入一个特殊的归档文件中，该归档文件称为资产包，应用程序在运行时从中读取。

于 2020-11-03T07:17:17.403 回答
0

pubspec.yaml如果您将图像放在文件夹文件夹中，请不要尝试注册所有图像，那么您应该注册所有文件夹。像这样

您将图像： hero.png 放在文件夹 Assets 内的文件夹 Images 中。资产>图像>hero.png

那么你应该将它们写在 'pubspec.yaml' 下：'flutter: assets: -Assets/Images/hero.png'

于 2019-04-09T02:57:58.950 回答
0

您应该在“-”之前留出 2 个空格，在“-”之后留出 1 个空格来指定图像位置。

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

 assets:
   - assets/images/icons/like.png
   - assets/images/icons/logout.png
于 2019-10-12T11:24:11.770 回答