(3)、Study Flutter Image Widget组件

2019-03-01 本文已影响0人北有花开

上篇文章中介绍了Flutter的项目创建、Text Widget组件的属性详解，包括了TextStyle等认识，并且给出了一个小知识点，如何设置状态栏一体化和右上角不显示DEBUG字样，有兴趣的同学可以先读一读上篇文章。

Image属性介绍

这篇文章我将介绍Flutter中图片组件 Image Widget的使用，首先来看下Image 有哪些属性，如下：

QQ截图20190105174431.png

Flutter Image支持JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP格式图片。

image：设置一张图片，该属性通过@required 进行注解。表示必须传。

image其实质是一个ImageProvider抽象类，该抽象类包含如下子类：

QQ截图20190105175112.png

AssetImage: 访问images目录下的图片文件。
1、首先在项目中新建一个文件夹叫做images，向其添加一张图片timor.png。如下：

QQ截图20190105180745.png

然后打开pubspec.yaml文件，在flutter: 下面添加如下代码：

  assets:
    - images/timor.png

如下：

QQ截图20190105180303.png

之后再dart代码中使用AssetImage进行图片的展示，代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //右上角不显示DEBUG字样
      title: "Study Image Widget",
      theme: ThemeData(primaryColor: Colors.red),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Study Image Widget"),
        ),
        body: Center(
          child: Image(
            image: AssetImage("images/timor.png"),
          ),
        ),
      ),
    );
  }
}

效果如图：

QQ截图20190105180935.png

NetworkImage

从名字可以看出。这是加载一张网络图片。修改代码如下：

 child: Image(
            image: NetworkImage("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg"),
          ),

效果如图：

QQ截图20190105181221.png

FileImage

image: FileImage(File("/sdcard/Flutter/timor.png")),

需要我们在我们的手机存储上有个Flutter目录，该目录下有一个timor.png图片。

由于在Android中读取文件是需要权限的，因此我们还需要对设备进行权限申请。
在pubspec.yaml，中添加如下:

permission: ^0.1.0

import 'package:permission/permission.dart';

 requestPermissions() async {
    final res = await Permission.requestPermissions([
      PermissionName.Storage,
    ]);
    res.forEach((permission) {
    });
  }

效果和上面类似！

width、height

设置图像的宽高。

color、colorBlendMode

设置图像的颜色，设置颜色模式。两者一般搭配使用：

child: Image(
            //image: NetworkImage("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg"),
            image: FileImage(File("/sdcard/Flutter/timor.png")),
            width: 220.0,
            height: 220.0,
            color: Colors.red,
            colorBlendMode:BlendMode.color ,
          ),

效果如下：

QQ截图20190107150215.png

fit 图像填充模式

一张图片如何在Image Widget中填充模式，如：

        child: Container(
            color: Colors.lightBlue,
            width: 500.0,
            height: 600.0,
            child: Image(
              image: NetworkImage(
                "https://avatars3.githubusercontent.com/u/7410469?s=460&v=4",
              ),
              fit: BoxFit.fitWidth,
            ),
          ),

这儿使用了一个Container Widget容器组件，后面会详解这个。暂时作为了解。我给容器设置了宽高和颜色。然后给里面的Image设置了fit模式为BoxFit.fitWidth，表示尽量填充满Container的宽度。效果如下：

QQ截图20190107151851.png

alignment如何使图像在其容器边界内对齐

如下，左下对齐。

child: Container(
            color: Colors.lightBlue,
            width: 500.0,
            height: 600.0,
            child: Image(
              image: NetworkImage(
                "https://avatars3.githubusercontent.com/u/7410469?s=460&v=4",
              ),
              alignment: Alignment.bottomLeft,
            ),
          ),

QQ截图20190107152208.png

repeat 如何绘制在其容器内，其他未绘制区域图像的显示。

当我们想用图片，将蓝色区域用该图像显示完，则可以如下：

 child: Container(
            color: Colors.lightBlue,
            width: 500.0,
            height: 600.0,
            child: Image(
              image: NetworkImage(
                "https://avatars3.githubusercontent.com/u/7410469?s=460&v=4",
              ),
              repeat: ImageRepeat.repeat,
            ),
          ),

QQ截图20190107152523.png

centerSlice 拉伸图像，类似.9.png
当我们需要图像在某个区域或点进行拉伸时，使用如下：

child: Container(
            color: Colors.lightBlue,
            width: 500.0,
            height: 600.0,
            child: Image(
                image: NetworkImage(
                  "https://avatars3.githubusercontent.com/u/7410469?s=460&v=4",
                ),
                centerSlice: Rect.fromLTWH(10.0,10.0, 10.0, 10.0)),
          ),

QQ截图20190107153547.png

matchTextDirection
是否和按照TextDirection方向绘制图像，默认false。需要配合FilterQuality使用。如下

 body: ListView(
          children: <Widget>[
            Directionality(
              textDirection: TextDirection.ltr,
              child: Image(
                image: NetworkImage(
                  "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1546847255&di=dda206d274515c51d712b66ca9b8b1d5&src=http://imgsrc.baidu.com/imgad/pic/item/0b55b319ebc4b7454d716709c5fc1e178b8215c3.jpg",
                ),
                matchTextDirection: true,
              ),
            ),
            Directionality(
              textDirection: TextDirection.rtl,
              child: Image(
                image: NetworkImage(
                  "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1546847255&di=dda206d274515c51d712b66ca9b8b1d5&src=http://imgsrc.baidu.com/imgad/pic/item/0b55b319ebc4b7454d716709c5fc1e178b8215c3.jpg",
                ),
                matchTextDirection: true,
              ),
            ),
          ],
        ),

QQ截图20190107154940.png

gaplessPlayback
当ImageProvider发生变化后，重新加载图片的过程中，原图片的展示是否保留。若值为true，保留，若为false，不保留，直接空白等待。默认false
filterQuality
图像过滤质量，默认low

(3)、Study Flutter Image Widget组件

Image属性介绍

猜你喜欢

热点阅读