P20. Flutter 静态资源和项目图片的处理

我们讲图片组件的时候,多使用了网络图片进行讲解,所以造成了小伙伴不会使用项目资源图片,本文就为大家讲解如何使用项目资源图片。

pubspec.yaml 文件

如果想配置项目资源文件,就需要使用pubspec.yaml文件,需要把资源文件在这里声明。

pubspec.yaml 文件

比如在项目根目录下新建了一个images文件夹,文件夹下面放了一个图片,图片的名称叫做logo_light.jpg,那我们在pubspec.yaml文件里就要写如下代码进行声明。

assets:
    - images/logo_light.jpg

使用项目图片资源

有了声明后,我们就可以直接在项目中引用这个文件了。这里使用最简单的代码结构,只用了一张图片。代码如下:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset('images/logo_light.jpg'),
    );
  }
}

这时候已经在项目中引入成功了,可以预览看一下效果。

Flutter 静态资源和项目图片的处理

当然样子很丑,这里主要是学知识,就不做过多的修饰了。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P20. Flutter 静态资源和项目图片的处理

发表评论

提供最优质的资源集合

立即查看 了解详情