5.flutter-图片控件

截屏2022-08-03 15.14.17.png 图像 2.gif

import 'dart:ui';
import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';

import 'package:transparent_image/transparent_image.dart';

class ZFLImageXieChengPage extends StatefulWidget {
  @override
  _ZFLImageXieChengPageState createState() => _ZFLImageXieChengPageState();
}

class _ZFLImageXieChengPageState extends State<ZFLImageXieChengPage> {
  bool isPermission = false;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: [
        networkImage(),
        assetImage(),
        assetImage2(),
        setPhoto(),
        fadeImage(),
        fadeImage2(),
        Expanded(child: cacheImage())
      ],
    ));
  }

//网络图片
  networkImage() {
    return Image.network('http://www.devio.org/img/avatar.png');
  }

//静态图片
  assetImage() {
    return Container(
        width: 80,
        height: 80,
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage('assets/images/icon_detail.png')),
        ));

//    return Container(
//        width: 20,
//        height: 20,
//        decoration: BoxDecoration(
//          image: DecorationImage(
//              image: NetworkImage('http://www.devio.org/img/avatar.png')),
//        ));
//    return AssetImage('assets/images/icon_detail.png');
  }

//静态图片
  assetImage2() {
    return Image.asset(
      'assets/images/icon_detail.png',
      width: 80,
      height: 80,
    );
  }

   // 需要Android-app-src-androidmainfest.xml中 配置权限
//    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
//    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
//    <application android:requestLegacyExternalStorage="true"
//加载本地图片 手机中的图片
//  #权限管理
//  permission_handler: ^5.0.1+2
  setPermission() async {
    if (await Permission.storage.request().isGranted) {
      //判断是否授权,没有授权会发起授权
      print("获得了授权");
      isPermission = true;
      setState(() {
        setPhoto();
      });
    } else {
      print("没有获得授权");
      isPermission = false;
    }
  }

  setPhoto() {
    if (isPermission) {
      print("有授权");
      return Center(
          child: (Image.file(File('/storage/emulated/0/Download/test.jpg'),
              width: 80, height: 80)));
    } else {
      print("申请授权");
      setPermission();
      return null;
    }
  }

  //kTransparentImage 占位符 导入  transparent_image: ^2.0.0
  //设置placeholder 占位符
  fadeImage() {
    return Stack(
      children: [
//        Center(child: CircularProgressIndicator(),),
        Center(
          child: FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            width: 80,
            height: 80,
            image:
                "http://t11.baidu.com/it/u=975244027,1224419617&fm=58&app=83&f=JPEG?w=250&h=250",
          ),
        )
      ],
    );
  }

  //这里的placeholder,默认显示的图片。
  fadeImage2() {
    return Stack(
      children: [
//        Center(child: CircularProgressIndicator(),),
        Center(
          child: FadeInImage.assetNetwork(
            placeholder: 'assets/images/appbar_normal_bg.png',
            width: 80,
            height: 80,
            image:
                "http://t11.baidu.com/it/u=975244027,1224419617&fm=58&app=83&f=JPEG?w=250&h=250",
          ),
        )
      ],
    );
  }

  //图片缓存
//  cached_network_image: ^2.0.0-rc
  cacheImage() {
    return Center(
      child: CachedNetworkImage(
        width: 80,
        height: 80,
        placeholder: (context, url) => CircularProgressIndicator(),
        imageUrl:
            'http://t10.baidu.com/it/u=1995885605,1860079861&fm=58&app=83&f=JPEG?w=250&h=250',
      ),
    );
  }
}