显示网络上的远程图片
对大多数移动应用来说,图片显示是一项基础功能。
Flutter 提供了 Image
来显示不同类型的图片。
使用 Image.network()
构造函数来处理来自 URL 的图片。
Image.network('https://picsum.photos/250?image=9'),
意外之喜:Gif 动画
Image
widget 令人兴奋的特性之一:提供了开箱即用的 gif 动画支持!
Image.network(
'https://docs.flutter.dev/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'),
),
);
}
}