flutter圖片組件

在flutter中，image組件有不少構造函數，經常使用的包括Image.asset（本地圖片）和Image.network（遠程圖片）。

經常使用屬性

無論是顯示本地圖片仍是遠程圖片，image組件都包含下列經常使用屬性：

1. alignment ：圖片的對齊方式 
2. color 和colorBlendMode：設置圖片的背景顏色，一般和 colorBlendMode 配合一塊兒使用，這樣能夠是圖片顏色和背景色混合。
3. fit ：fit 屬性用來控制圖片的拉伸和擠壓，這都是根據父容器來的。 
4. repeat ：圖片的平鋪重複方式
5. width ：寬度 通常結合 ClipOval 才能看到效果 
6. height ：高度 通常結合 ClipOval 才能看到效果

其中fit包括：

• BoxFit.fill:全圖顯示，圖片會被拉伸，並充滿父容器。
• BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。 
• BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要充滿整個容器，還不變形）。
• BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸，可能裁切。 
• BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切。 
• BoxFit.scaleDown：效果和 contain 差很少，可是此屬性不容許顯示超過源圖片大小，可小不可大。 

顯示遠程圖片

顯示遠程圖片比較簡單，只須要填入圖片地址就能夠了

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(
          title:Text('123123'),
        ),
        body:HomeContent()
      ),
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Center(
      child:Container(
        child:Image.network(
          "https://www.baidu.com/img/bd_logo1.png?where=super",
          alignment: Alignment.center,
          color:Colors.blue,
          colorBlendMode: BlendMode.screen,
          fit:BoxFit.cover,
          repeat:ImageRepeat.repeat,
        ),
        width:300,
        height:300,
        decoration: BoxDecoration(
          color:Colors.yellow,
          border:Border.all(
            color:Colors.blue,
            width:2.0
          ),
          borderRadius:BorderRadius.all(
            Radius.circular(10)
          ),
        ),
        margin:EdgeInsets.all(15),
        alignment:Alignment(0,0)
      ),
    );
  }
}

顯示本地圖片

要顯示本地圖片，首先須要有本地圖片資源，先在項目根目錄裏面新建images文件夾，用於存放圖片：

而後，在項目根目錄下面的pubspec.yaml文件裏面，引入須要使用的圖片。

最後，使用圖片就能夠了

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(       
        child:Image.asset('images/a.jpeg',
          fit: BoxFit.cover,
        ),
        height: 300,
        width: 300,
      )
    );
  }
}

顯示圓角圖片

在前面的Container組件裏面，經過設置了組件的寬高和decoration裏的borderRadius能夠實現一個圓形的容器，而後再這個圓形容器裏面添加圖片，就能夠實現圓角圖片了。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('FlutterDemo')),
          body: HomeContent(),
     ));
  }
}
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(       
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(150),
          image: DecorationImage(
            image:NetworkImage("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
            fit: BoxFit.cover
          )
        ),
      )
    );
  }
}

實現圓形圖片

在上面，是經過控制圖片外層容器的形狀來實現圓形圖片的，下面，直接使用圖片組件中的ClipOval實現圓形圖片

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('FlutterDemo')),
          body: HomeContent(),
     ));
  }
}
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(       

        child: ClipOval(
            child: Image.network(              
              'http://www.ionic.wang/statics/index/images/ionic4.png',
              height: 100,
              width: 100,
              fit: BoxFit.cover,
            ),
        ),
      )
    );
  }
}

使用ClipOval實現圓形圖片時，若是是正方形的圖片，則會默認顯示正圓形；若是圖片自己是長方形的，則默認顯示爲橢圓形。若是想要改變顯示的形狀，能夠向上面這樣爲容器添加寬高（不是圖片的寬高），從而改變默認顯示形狀。