flutter—Image圖片的使用

加入圖片的方式：

• Image.asset:加載資源圖片，就是加載項目資源目錄中的圖片,加入圖片后會增大打包的包體體積，用的是相對路徑。
• Image.network:網絡資源圖片，意思就是你需要加入一段http://xxxx.xxx的這樣的網絡路徑地址。
• Image.file:加載本地圖片，就是加載本地文件中的圖片，這個是一個絕對路徑，跟包體無關。
• Image.memory: 加載Uint8List資源圖片。

網絡資源圖片：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'http://bug.mvbox.com/data/upload/1/202009/0816094109428nuc.png', 
              // fit: BoxFit.fitHeight,
              // color: Colors.redAccent,
              // colorBlendMode: BlendMode.lighten,
              repeat: ImageRepeat.repeatX,
              // scale: 1.0
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.greenAccent,
          ),
        )
      ),
    );
  }
}

　　

靜態資源圖片：

如果想配置項目資源文件，需要使用pubspec.yaml文件，把資源文件在這里聲明。比如在項目根目錄下新建了一個images文件夾，文件夾下面放了一個圖片1.jpg，那在pubspec.yaml文件里就要進行聲明。代碼如下：

  assets:
    - images/1.jpg

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset('images/1.jpg'),
    );
  }
}

 

 

fit屬性

fit屬性可以控制圖片的拉伸和擠壓，這些都是根據圖片的父級容器來的。

• BoxFit.fill:全圖顯示，圖片會被拉伸，並充滿父容器。

• BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。

• BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要充滿整個容器，還不變形）。

• BoxFiit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸，可能裁切。

• BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切。

• BoxFit.scaleDown：效果和contain差不多，但是此屬性不允許顯示超過源圖片大小，可小不可大。

圖片混合模式

圖片混合模式（colorBlendMode）和color屬性配合使用，能讓圖片改變顏色，里邊的模式非常的多，產生的效果也是非常豐富的。在這里作幾個簡單的例子，讓大家看一下效果，剩下的留給小伙伴自己探索。

• color：是要混合的顏色，如果你只設置color是沒有意義的。
• colorBlendMode:是混合模式，相當於我們如何混合。

repeat圖片重復 

• ImageRepeat.repeat : 橫向和縱向都進行重復，直到鋪滿整個畫布。

• ImageRepeat.repeatX: 橫向重復，縱向不重復。

• ImageRepeat.repeatY：縱向重復，橫向不重復。