Flutter元件Image

小熊學程式設計發表於2021-04-06
Flutter元件

載入圖片

載入網路圖片

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image(
              image: NetworkImage('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd6%2F1802%2F92%2F953a189ea54336b5.jpg_r_720x480x95_2611ec29.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620267881&t=c3c553db59153b5b22a6e6559f740332'),
            ),
          ),
      ),
    );
  }
}
複製程式碼

或者

...
child: Image.network('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd6%2F1802%2F92%2F953a189ea54336b5.jpg_r_720x480x95_2611ec29.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620267881&t=c3c553db59153b5b22a6e6559f740332'),
...
複製程式碼

截圖2021-04-06 上午10.26.10.png

載入本地圖片

1. 手動建立圖片目錄 assets/images，將圖片拖到資料夾中

截圖2021-04-06 上午10.45.33.png

2. pubspec.yaml配置檔案中設定圖片路徑（注意assets:前面的空格可能引起編譯錯誤）

截圖2021-04-06 上午10.44.09.png

3. 載入本地圖片

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.asset('assets/images/img.jpg')
          ),
      ),
    );
  }
}
複製程式碼

截圖2021-04-06 上午10.47.38.png

圖片常用屬性

 Image.asset(
    String name, {
    Key? key,
    AssetBundle? bundle,
    this.frameBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double? scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    String? package,
    this.filterQuality = FilterQuality.low,
    int? cacheWidth,
    int? cacheHeight,
  }) 
複製程式碼

frameBuilder

當載入圖片的時候回撥frameBuilder可以用於處理圖片載入時顯示佔點陣圖片和載入圖片的過渡效果，比如淡入淡出效果

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.network(
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620271164&t=c27a699d576423aedeb27e955fb3eaf9',
              frameBuilder: (BuildContext context, Widget child, int frame,
                  bool wasSynchronouslyLoaded) {
                if (wasSynchronouslyLoaded) {
                  return child;
                }
                return AnimatedOpacity(
                  child: child,
                  opacity: frame == null ? 0 : 1,
                  duration: const Duration(seconds: 2),
                  curve: Curves.easeOut,
                );
              },
            ),
          ),
      ),
    );
  }
}
複製程式碼

errorBuilder

當圖片載入失敗時，顯示的檢視

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.network(
                'https://xxx.png',
              errorBuilder: (ctx, exception, stackTrace) {
                return Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                  child: Center(child: Text('Missing Image')),
                );
              },
            ),
          ),
      ),
    );
  }
}
複製程式碼

截圖2021-04-06 上午11.35.33.png

semanticLabel和excludeFromSemantics

semanticLabel表示描述圖片語義 讀屏時可以提供語義描述 excludeFromSemantics 表示是否去除圖片語義

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.network(
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620271164&t=c27a699d576423aedeb27e955fb3eaf9',
                semanticLabel: "河流以及兩旁的樹木",
                excludeFromSemantics: false
            ),
          ),
      ),
    );
  }
}
複製程式碼

color和colorBlendMode常用於濾鏡效果

下面效果瞭解一下即可

  • clear：清楚源影像和目標影像。
  • color：獲取源影像的色相和飽和度以及目標影像的光度。
  • colorBurn：將目標的倒數除以源，然後將結果倒數。
  • colorDodge：將目標除以源的倒數。
  • darken：通過從每個顏色通道中選擇最小值來合成源影像和目標影像。
  • difference：從每個通道的較大值中減去較小的值。合成黑色沒有效果。合成白色會使另一張影像的顏色反轉。
  • dst：僅繪製目標影像。
  • dstATop：將目標影像合成到源影像上，但僅在與源影像重疊的位置合成。
  • dstIn：顯示目標影像，但僅顯示兩個影像重疊的位置。不渲染源影像，僅將其視為蒙版。源的顏色通道將被忽略，只有不透明度才起作用。
  • dstOut：顯示目標影像，但僅顯示兩個影像不重疊的位置。不渲染源影像，僅將其視為蒙版。源的顏色通道將被忽略，只有不透明度才起作用。
  • dstOver：將源影像合成到目標影像下。
  • exclusion：從兩個影像的總和中減去兩個影像的乘積的兩倍。
  • hardLight：調整源影像和目標影像的成分以使其適合源影像之後，將它們相乘。
  • hue：獲取源影像的色相，以及目標影像的飽和度和光度。
  • lighten：通過從每個顏色通道中選擇最大值來合成源影像和目標影像。
  • luminosity：獲取源影像的亮度，以及目標影像的色相和飽和度。
  • modulate：將源影像和目標影像的顏色分量相乘。
  • multiply：將源影像和目標影像的分量相乘，包括alpha通道。
  • overlay：調整源影像和目標影像的分量以使其適合目標後，將它們相乘。
  • plus：對源影像和目標影像的組成部分求和。
  • saturation：獲取源影像的飽和度以及目標影像的色相和亮度。
  • screen：將源影像和目標影像的分量的逆值相乘，然後對結果求逆。
  • softLight：對於低於0.5的源值使用colorDodge，對於高於0.5的源值使用colorBurn。
  • src：放置目標影像，僅繪製源影像。
  • srcATop：將源影像合成到目標影像上，但僅在與目標影像重疊的位置合成。
  • srcIn：顯示源影像，但僅顯示兩個影像重疊的位置。目標影像未渲染，僅被視為蒙版。目標的顏色通道將被忽略，只有不透明度才起作用。
  • srcOut：顯示源影像，但僅顯示兩個影像不重疊的位置。
  • srcOver：將源影像合成到目標影像上。
  • xor：將按位異或運算子應用於源影像和目標影像。

填充方式fit

  • fill：完全填充，寬高比可能會變。
  • contain：等比拉伸，直到一邊填充滿。
  • cover：等比拉伸，直到2邊都填充滿，此時一邊可能超出範圍。
  • fitWidth：等比拉伸，寬填充滿。
  • fitHeight：等比拉伸，高填充滿。
  • none：當元件比圖片小時，不拉伸，超出範圍擷取。
  • scaleDown：當元件比圖片小時，圖片等比縮小，效果和contain一樣。

截圖2021-04-06 上午11.01.22.png

設定對齊方式 alignment

topLeft topCenter topRight centerLeft center centerRight bottomLeft bottomCenter bottomRight

repeat

有空餘空間時是否重複顯示圖片

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 500,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.asset(
              'assets/images/img.jpg',
                repeat: ImageRepeat.repeat,
            )
          ),
      ),
    );
  }
}
複製程式碼

截圖2021-04-06 上午11.44.49.png

相關文章