顯示來自網際網路的圖片
如何顯示網路圖片。
對於大多數移動應用來說,顯示圖片是基礎功能。Flutter 提供了 Image 元件來顯示不同型別的圖片。
要顯示網路 URL 中的圖片,請使用 Image.network() 建構函式。
dart
Image.network('https://picsum.photos/250?image=9'),
進階:顯示動態 GIF
#Image 元件的一個實用功能是:它支援動態 GIF。
dart
Image.network(
'https://docs.flutter.club.tw/assets/images/dash/dash-fainting.gif',
);
使用佔位符實現圖片淡入效果
#預設的 Image.network 建構函式無法處理更高階的功能,例如圖片載入後的淡入效果。若要實現此任務,請參閱 使用佔位符實現圖片淡入效果。
互動示例
#import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
var title = 'Web Images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: Text(title)),
body: Image.network('https://picsum.photos/250?image=9'),
),
);
}
}