一、Flutter 导入资源图片

Flutter 资源路径配置 : 资源路径在根目录中的 pubspec.yaml 配置文件中配置 ;

将 flutter 节点下的 assets 节点的注释打开 , 即删除前面的 # 注释符号 ;

然后在 flutter 项目根目录创建 images 目录 , 将图片 hunter.png 拷贝到该 images 目录中 ;

并在 pubspec.yaml 配置文件的 assets 节点下配置 - images/hunter.png 信息 ;

# 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/hunter.png

之后就可以在 flutter 项目中使用该文件了 ;

下图展示了资源文件目录结构以及配置文件中的配置信息 ;

导入资源图片样式 :

二、Flutter 使用资源图片

Image 组件中使用资源图片 , 在其 image 字段使用 AssetImage 类型的图片即可 ;

代码示例 : 设置一个 200 x 200 大小的 Image 组件 , 显示 images/hunter.png 资源图片 ;

Image(width: 200,height: 200,image: AssetImage("images/hunter.png"),
)

三、完整代码示例

完整代码示例 :


import 'package:flutter/material.dart';class ResourcePage extends StatefulWidget {@override_ResourcePageState createState() => _ResourcePageState();
}class _ResourcePageState extends State<ResourcePage> {@overrideWidget build(BuildContext context) {return MaterialApp(title: "资源文件使用",theme: ThemeData(primarySwatch: Colors.blue),home: Scaffold(appBar: AppBar(title: Text("资源文件使用"),leading: GestureDetector(onTap: (){Navigator.pop(context);},child: Icon(Icons.arrow_back_ios),),),body: Container(// 居中显示alignment: Alignment.center,// 垂直线性布局child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Image(width: 200,height: 200,image: AssetImage("images/hunter.png"),)],),),),);}
}

运行效果 :

四、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15539996 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】Flutter 资源文件使用 ( 导入资源图片 | 使用图片资源 )相关推荐

Visual C# 资源文件编程--使用资源文件
本文将接着上篇文章的话题来探讨资源文件另外一个问题,在Visual C#如何使用资源文件.在上一篇文章中,我们已经成功的创建了一个名称为"My.resources"的资源文件.这个 ...
Visual C# 资源文件编程--创建资源文件
资源文件顾名思义就是存放资源的文件.资源文件在程序设计中有着自身独特的优势,他独立于源程序,这样资源文件就可以被多个程序使用.同时在程序设计的时候,有时出于安全或者其他方面因素的考虑,把重要东西存放在 ...
android调用资源文件配置,Android资源文件
应用资源是指应用中与源代码分离的资源,如图像.音频文件以及任何与应用的视觉呈现有关的内容.在Android项目中的每一项资源,SDK构建工具都会定义一个唯一的整形ID,可以通过ID对资源进行应用.提供 ...
学习使用资源文件[9] - WAVE 资源
为什么80%的码农都做不了架构师?>>> //rc 文件: sound1 WAVE "SoundFile1.wav" sound2 WAVE "S ...
学习使用资源文件[6] - 菜单资源
为什么80%的码农都做不了架构师?>>> //rc 文件: MyMenu1 MENU begin Popup "File" begin MenuItem & ...
C#资源文件与与资源名称字符串之间的互相转化
1.使用ResourceManager string st = Properties.Resources.ResourceManager.GetString(tableName); value = P ...
【apktool正确打包流程】Apktool 打包失败解决办法【解包时必须带上-r参数，表示不解码资源文件】因为资源文件的接码会导致各种问题？？？
Apktool 打包失败解决办法_Jasonzhiying的博客-CSDN博客错误提示:brut.androlib.AndrolibException: brut.common.BrutExcept ...
【Unity3D】资源文件 ① ( Unity 中常用的文件类型 | Unity 文件操作 | 文件系统中查看文件 | 添加文件 | 删除文件 | 导入文件 | 复制文件 | 缩略图显示 )
文章目录一.Unity 中常用的文件类型二.Unity 文件操作 1.文件系统中查看文件 2.添加目录 / 文件 3.删除目录 / 文件 4.导入资源 5.复制资源 6.缩略图显示 7.meta ...
Android 中定义图片的资源文件
---恢复内容开始--- Android中定义图片的Id数组可以在java代码中直接通过new定义,之后使用,还有一种方法是在xml资源文件中直接定义,然后再java代码中通过函数可以获取xml代码中 ...

【Flutter】Flutter 资源文件使用 ( 导入资源图片 | 使用图片资源 )

文章目录

一、Flutter 导入资源图片

二、Flutter 使用资源图片

三、完整代码示例

四、相关资源

【Flutter】Flutter 资源文件使用 ( 导入资源图片 | 使用图片资源 )相关推荐

最新文章

热门文章