【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )-阿里云开发者社区

【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )

2022-01-29 270

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )

文章目录

一、transparent_image 透明图像插件

二、内存加载 Placeholder

三、完整代码示例

四、相关资源

一、transparent_image 透明图像插件

安装 transparent_image 插件 :

搜索插件 : 在 https://pub.dev/packages 中搜索 transparent_image 插件 ;

插件地址 : https://pub.dev/packages/transparent_image

配置插件 : 在 pubspec.yaml 中配置插件 ;

dependencies:
  transparent_image: ^2.0.0

获取插件 : 点击 pubspec.yaml 中右上角的 Pub get 按钮 , 获取插件 ;

导入头文件 :

import 'package:transparent_image/transparent_image.dart';

二、内存加载 Placeholder

Placeholder 是一个占位控件 , 在图片还没有就绪时 , 如从网络获取图片 , 先使用 Placeholder 占据图片组件的位置 ;

代码示例 :

Stack(
  children: [
    // 进度条
    Center(child: CircularProgressIndicator(),),
    Center(
      // 网络加载时渐变出现
      child: FadeInImage.memoryNetwork(
        // Placeholder
        placeholder: kTransparentImage,
        image: "https://ucc.alicdn.com/images/user-upload-01/2021032321394771.png",
      ),
    )
  ],
),

运行效果 : 进度条一直都在 , 开始时 FadeInImage 组件是透明状态 , 显示进度条 , 之后变为不透明 , 进度条被覆盖 , 但是一直在后面转 ;

显示的网络图片 : ( 吸取上一篇博客的教训 , 使用风景图片 )

三、完整代码示例

完整代码示例 :

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:cached_network_image/cached_network_image.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: ListView(
          children: [
            Stack(
              children: [
                // 进度条
                Center(child: CircularProgressIndicator(),),
                Center(
                  // 网络加载时渐变出现
                  child: FadeInImage.memoryNetwork(
                    // Placeholder
                    placeholder: kTransparentImage,
                    image: "https://ucc.alicdn.com/images/user-upload-01/2021032321394771.png",
                  ),
                )
              ],
            ),
            // 图片组件 , 从网络中加载一张图片
            /*Image.network(
              // 图片地址
              "https://ucc.alicdn.com/images/user-upload-01/2021032313493741.png",
            ),*/
            /*Image(
              image: AssetImage("images/sidalin.png"),
            ),*/
            //Image.asset('images/sidalin2.png', ),
            /// 从 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 配置文件 :

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
  transparent_image: ^2.0.0
  cached_network_image: ^2.5.1
dev_dependencies:
  flutter_test:
    sdk: flutter
flutter:
  uses-material-design: true
  assets:
    - images/sidalin.png
    - images/sidalin2.png
    - images/waiting.gif