姬長信(Redy)

4.2 图片组件

## 4.2 图片组件 图片组件/uff08Image/uff09是显示图像的组件/uff0cImage组件有多种构造函数/uff1a /u2022new Image /uff1a从ImageProvider获取图像。 /u2022new Image.asset/uff1a加载资源图片。 /u2022new Image.file/uff1a加载本地图片文件。 /u2022new Image.network/uff1a加载网络图片。 /u2022new Image.memory/uff1a加载Uint8List资源图片。 Image组件常见属性见表4-2。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041759562924) ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041801023610) BoxFit取值及描述参见表4-3。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041801485842) 下面的示例加载了一张网络图片/uff0c以BoxFit.fitWidth模式进行填充图片。 示例代码如下/uff1a ```objective-c import 'package:flutter/material.dart'; void main() { runApp( new MaterialApp( title: 'Image demo', home: new ImageDemo(), ) ); } class ImageDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Center( //添加网络图片 child: new Image.network( //图片url 'https://flutter.io/images/flutter-mark-square-100.png', //填充模式 fit: BoxFit.fitWidth, ), ); } } ``` 上述示例代码视图展现大致如图4-2所示。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041802387662)