• image組件的使用
• fit組件 image填充方式
• 圖片混合模式(濾鏡效果)
• repeat重復(fù)屬性

這一篇主要是對(duì)image組件的使用.經(jīng)過一段時(shí)間的學(xué)習(xí),發(fā)現(xiàn)Flutter中,基本上所有功能都是通過調(diào)用組件的形式進(jìn)行完成功能的
因此,如果需要在一個(gè)地方加圖片,那么就只需要new Image()即可.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '這里是beline的app',
      home: Scaffold(
        appBar: AppBar(title: Text('image組件')),
        body:Center(
          child: Container(
            child: Image.network('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3949195143,3166008216&fm=26&gp=0.jpg'),
            width:400.0,
            height:300.0,
            color:Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

由于在body中調(diào)用的是Center組件,所以child中的內(nèi)容就會(huì)被居中,具體樣式:

image.png

當(dāng)然,我們的image組件還有很多屬性,下面我們一一來看

image.png

• asset 表示在項(xiàng)目的資源目錄引入,app目錄中引入,在打包時(shí)會(huì)一起打包到app程序中
• file 表示存在手機(jī)中的地址,也可以理解為本地地址
• memory 加載Uint8List資源圖片(目前沒用過,詳細(xì)需要參考文檔使用)
• network 網(wǎng)絡(luò)地址

現(xiàn)在圖片放在容器當(dāng)中,處于正中間的位置,發(fā)現(xiàn)圖片并不能很好的適應(yīng)容器,所以這個(gè)時(shí)候我們需要調(diào)用fit屬性,類似于css中的background-size的作用
1.contain不對(duì)圖片做任何處理,默認(rèn)值.和上圖一樣.

fit:BoxFit.contain

image.png

2. fill按照容器的大小進(jìn)行拉伸

fit:BoxFit.fill

image.png

3.fitWidth 表示橫向100%,豎向多余部分裁切,不夠部分空白

fit:BoxFit.fitWidth

image.png

4.fitHeight 和fitWidth類似,豎向100%顯示,橫向多余部分裁切,不夠的部分空白

fit:BoxFit.fitHeight

image.png

5.cover 圖片充滿容器,按照容器最短的邊完全填充圖片,以保證圖片占滿整個(gè)容器

fit:BoxFit.cover

image.png

5.scaleDown 保持原圖片大小

fit:BoxFit.scaleDown

image.png

圖片混合模式 colorBlendMode 濾鏡模式

我們可以通過colorBlendMode給圖片混合一種顏色,這樣就能從視覺上看上去給圖片加了一層濾鏡
想要混合顏色,需要兩步

• 設(shè)置顏色
• 通過colorBlendMode設(shè)置混合模式

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '這里是beline的app',
      home: Scaffold(
        appBar: AppBar(title: Text('image組件')),
        body:Center(
          child: Container(
            child: Image.network(
              'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3949195143,3166008216&fm=26&gp=0.jpg',
              color:Colors.green,
              colorBlendMode: BlendMode.darken,
            ),
            width:400.0,
            height:300.0,
            color:Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

image.png

混合模式的模式有非常多種,同樣是混合綠色,但是換一種混合方式,呈現(xiàn)形式也不同,比如

colorBlendMode: BlendMode.difference,

image.png

colorBlendMode: BlendMode.overlay,

image.png

具體需要使用哪一種混合模式,請(qǐng)根據(jù)API選擇.

repeat 重復(fù)

這里的repeat使用也可以參考css中的repeat屬性.這里需要注意的是,需要調(diào)用ImageRepeat組件來設(shè)置repeat類型

repeat: ImageRepeat.noRepeat,

• noRepeat 不重復(fù),默認(rèn)
• repeatX 相對(duì)于容器,橫向重復(fù)
• repeatY 相對(duì)于容器,縱向重復(fù)
• repeat 重復(fù)鋪滿整個(gè)容器