[英]How to add asset image in app bar as an action icon in Flutter application?
问题我正在尝试在颤动屏幕的应用栏中添加注销图像图标。 我创建了一个资产文件夹并创建了目录 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
应用栏代码
@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),
),
],
),
问题出在您提供给IconButton
路径中。
应该是这样的。
Scaffold(
appBar: AppBar(
actions: [
IconButton(
icon: Image.asset('assets/images/icons/logout.png'),
onPressed: () => exit(0),
),
],
),
)
根据Flutter 文档,您需要包含资产的pubspec.yaml
中指定的完整路径才能加载它:
Image.asset('assets/images/icons/logout.png')
这是 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: () { },
),
],
),
);
}
不要忘记像这样在pubspec.yaml
为您的移动应用徽标添加asset
,并将名为 logo.png 的图像添加到资产目录中。
flutter:
assets:
- assets/images/icons/logout.png
注意: flutter
部分的assets
子部分指定了应包含在应用程序中的文件。 每个资产都由资产文件所在的显式路径(相对于pubspec.yaml
文件)标识。 声明资产的顺序无关紧要。 使用的实际目录名称(第一个示例中的assets
或上例中的directory
)无关紧要。
在构建过程中,Flutter 将资产放入一个称为资产包的特殊档案中,应用程序在运行时从中读取。
如果您将图像放在文件夹文件夹中,请不要尝试在pubspec.yaml
注册所有图像,那么您应该注册所有文件夹。 像这样
您将图像: hero.png 放在文件夹 Assets 内的文件夹 Images 中。 资产>图像>hero.png
那么你应该将它们写在 'pubspec.yaml' 下: 'flutter: assets: -Assets/Images/hero.png '
你应该在 '-' 之前给 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.