前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )

【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )

作者头像
韩曙亮
发布2023-03-29 08:57:30
1.8K0
发布2023-03-29 08:57:30
举报
文章被收录于专栏:韩曙亮的移动开发专栏

文章目录

一、加载网络图片


参考 【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 ) 三、Image.network 构造函数

代码示例 :

代码语言:javascript
复制
// 图片组件 , 从网络中加载一张图片
Image.network(
  // 图片地址
  "https://img-blog.csdnimg.cn/2021032313493741.
  width: 200,
),

二、加载静态图片


加载静态图片步骤 : 先声明图片 , 再使用图片 ;

① 声明图片资源 : 在 pubspec.yaml 中声明图片资源路径 ;

② 访问图片 : 在 dart 文件中使用 AssetImage 类访问图片 ;

配置静态图片 : 注册层次 , assets 按在 flutter 的二级层次中配置 ;

代码语言:javascript
复制
flutter:
  uses-material-design: true

  assets:
    - images/sidalin.png
    - images/sidalin2.png

代码示例 : 下面两种方式都可以加载静态图片

代码语言:javascript
复制
Image(
  width: 200,
  image: AssetImage("images/sidalin.png"),
),
Image.asset(
  'images/sidalin2.png',
  width: 200,),

三、加载本地图片


安装 path_provider 插件 :

代码语言:javascript
复制
 dependencies:
  path_provider: ^2.0.1
  • 获取插件 : 点击 pubspec.yaml 中右上角的 Pub get 按钮 , 获取插件 ;
  • 导入头文件 :
代码语言:javascript
复制
import 'package:path_provider/path_provider.dart';

将图片拷贝到 /storage/emulated/0/Android/data/kim.hsl.flutter_image_widget/files 路径中 , 这也是调用 path_provider 插件的 getExternalStorageDirectory() 方法获得的 SD 卡路径 ;

拷贝图片命令 :

代码语言:javascript
复制
adb push sidalin3.png /storage/emulated/0/Android/data/kim.hsl.flutter_image_widget/files

代码示例 : 在 initState 方法中调用异步方法获取 SD 卡路径 , 在 build 方法中判定如果 SD 卡路径不为空 , 才显示 Image 组件 ;

代码语言:javascript
复制
  /// SD 卡路径
  String sdPath;

  @override
  void initState() {
    // 获取 SD 卡路径
    getSdPath();
  }

  void getSdPath() async {
    String path = (await getExternalStorageDirectory()).path;
    setState(() {
      sdPath = path;
    });
  }

/// 从 SD 卡加载图片
if(sdPath != null)
  Image.file(
    File('$sdPath/sidalin3.png'),
    width: 200,
  ),

四、完整代码示例


代码示例 :

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  /// SD 卡路径
  String sdPath;

  @override
  void initState() {
    // 获取 SD 卡路径
    getSdPath();
  }

  void getSdPath() async {
    String path = (await getExternalStorageDirectory()).path;
    setState(() {
      sdPath = path;
    });
  }

  
  @override
  Widget build(BuildContext context) {
    print("sdPath : $sdPath");
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            Text(
              'приветствовать товарища Сталина:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),

            // 图片组件 , 从网络中加载一张图片
            Image.network(
              // 图片地址
              "https://img-blog.csdnimg.cn/2021032313493741.png",
              width: 200,
            ),

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

            Image.asset(
              'images/sidalin2.png',
              width: 200,),

            /// 从 SD 卡加载图片
            if(sdPath != null)
              Image.file(
                File('$sdPath/sidalin3.png'),
                width: 200,
              ),

          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

pubspec.yaml 配置文件 :

代码语言:javascript
复制
name: flutter_image_widget
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  path_provider: ^2.0.1

dev_dependencies:
  flutter_test:
    sdk: flutter


flutter:
  uses-material-design: true

  assets:
    - images/sidalin.png
    - images/sidalin2.png

导入的文件 :

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

五、相关资源


参考资料 :

博客源码下载 :

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

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

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、加载网络图片
  • 二、加载静态图片
  • 三、加载本地图片
  • 四、完整代码示例
  • 五、相关资源
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档