Flutter 中 image 圖片組件

1. 圖片的常用屬性

1. alignment 對齊方式 ，值為Alignment型別，如：Alignment.topCenter；

2. color 顏色，值為Colors型別，如：Colors.red；

3. colorBlendMode 顏色混合模式，要與color一起設定才有效果，值為BlendMode型別，如：BlendMode.darken；

4. fit 圖片的填充方式，值為BoxFit型別，常用的有幾下幾種：

(1). BoxFit.fill 全圖顯示，圖片會被拉伸，并充滿父容器；

(2). BoxFit.contain 全圖顯示，顯示原比例，可能會有空隙；

(3). BoxFit.cover 圖片充滿，顯示可能拉伸，可能裁切，但不變形；

(4). BoxFit.fitWidth 寬度橫向充滿，顯示可能拉伸， 可能裁切；

(5). BoxFit.fitHeight 高度豎向充滿，顯示可能拉 伸，可能裁切；

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

5. repeat 平鋪，值為ImageRepeat型別，常用的有以下幾種：

(1). ImageRepeat.repeat : 橫向和縱向都進行重復，直到鋪滿整 個畫布；

(2). ImageRepeat.repeatX: 橫向重復，縱向不重復；

(3). ImageRepeat.repeatY：縱向重復，橫向不重復；

6. width 寬度，一般結合 ClipOval 才能看到效果；

7. height 高度，一般結合 ClipOval 才能看到效果；

2. 加載遠程圖片

使用 Image.network() 來加載遠程圖片，

代碼如下所示：

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('Flutter App')),
                // 主題
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// 添加網路遠程圖片
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Center(
            child:Container(
                // 將圖片作為子元素
                child:Image.network(
                    "http://www.ionic.wang/statics/index/images/ionic4.png",
                    // 對齊方式
                    alignment: Alignment.topCenter,

                    // 圖片顏色混合
                    color:Colors.purple,
                    colorBlendMode:BlendMode.darken,

                    // 圖片填充方式
                    fit:BoxFit.fitHeight,

                    // 重復-指定重復方向
                    // repeat: ImageRepeat.repeatY,
                ),

                // 寬度
                width:400,
                // 高度
                height:400,
                // 容器裝飾
                decoration:BoxDecoration(
                    // 顏色
                    color:Colors.yellow,
                    // 倒圓角
                    borderRadius: BorderRadius.all(
                        Radius.circular(50)
                    )
                ),
            )
        );
    }
}

效果圖如下：

上面圖片的顏色看起來有點怪怪的，就是用了顏色混合的效果，

3. 加載本地圖片

使用 Image.asset() 加載本地圖片，

加載本地圖片要復雜一些，分為以下幾步：

1. 在專案的根目錄下添加images檔案夾，放置需要加載的默認圖片在里面，為了適配不同解析度的圖片，新建2.x與3.x的檔案夾，放置2倍像素與3倍像素的圖片，如果有必要，4倍像素的圖片也加睛，但2倍像素與3倍像素的圖片是必須的；

2. 在pubspec.yaml里配置圖片的加載地址；

代碼如下所示：

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('Flutter App')),
                // 主題
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// 加載本地圖片
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Center(
            child:Container(

                // 在圖片檔案夾中放置圖片，2.x與3.x的都要有
                // 配置pubspec.yaml

                // 添加本地圖片
                child:Image.asset("images/a.jpeg"),
                height:500,
                width:300,
            )
        );
    }
}

效果圖如下：

4. 開發圓形圖片效果

圓形圖片是開發中經常會遇到的一種效果，多用于用戶頭像，

1. 添加圖片在容器中，給容器倒圓角；

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('Flutter App')),
                // 主題
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 把圖片做為背景，制作一個圓形圖
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Center(
            child:Container(
                // 寬度
                width:400,
                // 高度
                height:400,
                // 容器裝飾
                decoration:BoxDecoration(
                    // 顏色
                    color:Colors.yellow,
                    // 另一種倒圓角的方式
                    borderRadius:BorderRadius.circular(200),
                    // 將圖片作為背景,結合倒圓角實作圓形圖片
                    image: DecorationImage(
                        image:NetworkImage("http://www.ionic.wang/statics/index/images/ionic4.png"),
                        fit:BoxFit.cover
                    )
                ),
            )
        );
    }
}

效果圖如下：

2. 用Flutter提供的特定組件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('Flutter App')),
                // 主題
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// 制作圓形圖的另一種方式
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Center(
            child:Container(
                // 倒圓角50%
                child:ClipOval(
                    child:Image.network(
                        "http://www.ionic.wang/statics/index/images/ionic4.png",
                        height:200,
                        width:200,
                        fit:BoxFit.cover
                    ),
                ) 
            )
        );
    }
}

效果圖如下：