前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Flutter】Flutter 资源文件使用 ( 导入资源图片 | 使用图片资源 )

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

作者头像
韩曙亮
发布2023-03-28 21:56:47
1.6K0
发布2023-03-28 21:56:47
举报

文章目录

一、Flutter 导入资源图片


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

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

在这里插入图片描述
在这里插入图片描述

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

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

代码语言:javascript
复制
# 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 资源图片 ;

代码语言:javascript
复制
Image(
  width: 200,
  height: 200,
  image: AssetImage("images/hunter.png"),
)

三、完整代码示例


完整代码示例 :

代码语言:javascript
复制
import 'package:flutter/material.dart';

class ResourcePage extends StatefulWidget {
  @override
  _ResourcePageState createState() => _ResourcePageState();
}

class _ResourcePageState extends State<ResourcePage> {
  @override
  Widget 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"),
              )
            ],
          ),
        ),

      ),
    );
  }
}

运行效果 :

在这里插入图片描述
在这里插入图片描述

四、相关资源


参考资料 :

博客源码下载 :

本文参与?腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-03-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客?前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、Flutter 导入资源图片
  • 二、Flutter 使用资源图片
  • 三、完整代码示例
  • 四、相关资源
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
http://www.vxiaotou.com