flutter控件之图片控件
Image控件即图片控件,是显示图像的控件,Image控件有多种构造函数:
- new Image,用于从ImageProvider获取图像。
- new Image.asset,用于使用key从AssetBundle获取图像。
- new Image.network,用于从URL地址获取图像。
- new Image.file,用于从File获取图像。
为了自动执行像素密度感知资源分辨率,使用AssetImage指定图像,需要确保在控件树中的图片控件上方存在MaterialApp、WidgetsApp和MediaQuery控件。
下面是一个从URL地址获取图像的实例,并通过scale属性设置缩放比例:
下面是一个从本地文件目录中获取图像的实例:
上面的代码会在一个容器里显示一张图片,但是不同的手机有不同的像素比率,这时就需要根据手机的像素比率来加载不同图片,做法很简单,只需要在图片同级目录下创建2.0x/…和3.0/…的目录就可以了。
通过URL获取图片:
import 'package:flutter/material.dart'; class ImageDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('从URL地址获取图像'), ), body: new Center( child: new Image.network( 'http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg', scale: 2.0, ), ), ); } } void main() { runApp( new MaterialApp( title: 'Flutter教程', home: new ImageDemo(), ), ); }
效果:
获取本地的图片:
1.新建放置图片的目录,把图片导入其中
2.在pubspec .yaml中设置参数如图所示
3.进行代码的书写
效果如图所示: