Skip to content

Latest commit

 

History

History
213 lines (172 loc) · 6.47 KB

04.flutter image.md

File metadata and controls

213 lines (172 loc) · 6.47 KB

Image —— 图像

一、使用方式

  • 1.支持的图片格式：

    支持以下图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBMP

  • 2.图片文件夹

    image

  • 在项目的根目录下创建图片文件夹

  • 主资源默认对应于1.0倍的分辨率图片。看一个例子：

    …/my_icon.png //主资源
    …/2.0x/my_icon.png
    …/3.0x/my_icon.png
  • 在设备像素比率为1.8的设备上，.../2.0x/my_icon.png 将被选择。对于2.7的设备像素比率，.../3.0x/my_icon.png将被选择。
  • 如果未在Image控件上指定渲染图像的宽度和高度，它将占用与主资源相同的屏幕空间量（并不是相同的物理像素），只是分辨率更高。 也就是说，如果.../my_icon.png是72px乘72px，那么.../3.0x/my_icon.png应该是216px乘216px; 但如果未指定宽度和高度，它们都将渲染为72像素×72像素（以逻辑像素为单位）。
  • pubspec.yaml中asset部分中的每一项都应与实际文件相对应，但主资源项除外。当主资源缺少某个资源时，会按分辨率从低到的顺序去选择 （也就是说1x中没有的话会在2x中找，2x中还没有的话就在3x中找）。
  # To add assets to your application, add an assets section, like this:
  assets:
    - images/2.0x/live_end_yyicon.png
    - images/3.0x/live_end_yyicon.png
    - images/2.0x/treasure_default_card.png
    - images/3.0x/treasure_default_card.png
  • 配置好pubspec.yaml 之后需要运行Pacakages get

二、使用方法

  var netImageUrl1 = "http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg";
  var netImageUrl2 = "https://flutter.io/images/homepage/header-illustration.png";
  var localImageUrl = "images/2.0x/treasure_default_card.png";
  var fileTest = "/storage/emulated/0/cache/111.png";
  1. 加载本地Image目录下的图片 --> Image.asset
    Image.asset(localImageUrl)
  1. 加载网络图片 --> Image.network
    Image.network(netImageUrl2)
  1. 通过使用ImageProvider加载图片
    Image(image: NetworkImage(netImageUrl1),),
    Image(
       image: AssetImage(localImageUrl),
    )
  1. 加载外部文件里面图片
    Image.file(File(fileTest))

三、常用属性

  1. alignment 设置图片在宽高范围内的对齐方式
    alignment: Alignment.bottomLeft
  1. centerSlice 设置边缘裁剪形式
    centerSlice: Rect.fromLTWH(20, 20, 100, 100),  
    centerSlice: Rect.fromLTRB(100, 100, 100, 100),
  1. color 与 colorBlendMode 结合使用，用于颜色与每个图像像素混合
    color: Colors.black12,
    colorBlendMode: BlendMode.colorBurn,
  1. repeat 绘制图片未覆盖的布局边界的任何部分 repeat
    repeat:ImageRepeat.repeatX,
    repeat:ImageRepeat.repeatY,
    repeat:ImageRepeat.repeatX,
  1. 设置图片宽高
   //设置宽高
   width: 300,
   height: 300,
  1. 设置图片怎么分布到对应的宽高中
fit 模式 描述
BoxFit.fill 全图显示，显示可能拉伸，充满
BoxFit.contain 全图显示，显示原比例，不需充满
BoxFit.cover 显示可能拉伸，可能裁剪，充满
BoxFit.fitWidth 显示可能拉伸，可能裁剪，宽度充满
BoxFit.fitHeight 显示可能拉伸，可能裁剪，高度充满
BoxFit.scaleDown 效果和contain差不多,但是此属性不允许显示超过源图片大小，可小不可大
一个说明图片链接

四、一个完整代码的示例

image

import 'package:flutter/material.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Demo',
      theme: ThemeData(
        primarySwatch: Colors.green
      ),
      home: MyHomePage(title: 'Image Demo'),
    );

  }
}


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

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

class _MyHomePageState extends State<MyHomePage>{
  var netImageUrl1 = "http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg";
  var netImageUrl2 = "https://flutter.io/images/homepage/header-illustration.png";
  var localImageUrl = "images/2.0x/treasure_default_card.png";
  var fileTest = "/storage/emulated/0/cache/111.png";


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView(
            children: <Widget>[
              //从新建的image文件中获取
              Image.asset(localImageUrl),
              //加载网络图片
              Image.network(netImageUrl2),
              // 本地文件图片
//              Image.file(File(fileTest)),
              //使用ImageProvider加载图片
              Image(image: NetworkImage(netImageUrl1),),
              Image(
                width: 100,
                height: 100,
                image: AssetImage(localImageUrl),
              ),
              Image(
                //设置imageProvider
                image: AssetImage(localImageUrl),
                //设置图像在宽高范围内的对齐方式
                alignment: Alignment.bottomLeft,
                //设置边缘裁剪形式
//                centerSlice: Rect.fromLTWH(20, 20, 100, 100),
//                centerSlice: Rect.fromLTRB(100, 100, 100, 100),
               //color 与 colorBlendMode 结合使用，用于颜色与每个图像像素混合
                color: Colors.greenAccent,
                colorBlendMode: BlendMode.exclusion,
               // ? 图像过滤器的质量级别
               filterQuality: FilterQuality.high,
                //绘制图像未覆盖的布局边界的任何部分
//                repeat:ImageRepeat.repeat,
//                repeat:ImageRepeat.repeatY,
//                repeat:ImageRepeat.repeatX,
               //设置宽高
               width: 300,
               height: 300,
               fit: BoxFit.fill,
              )

            ],

        ),
      ),
    );
  }
}