Flutter基础—常用控件之图片

每个项目产品都会让你加埋点，你是愿意花几天一个个加，还是愿意几分钟一个小时加完去喝茶聊天？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

Image控件即图片控件，是显示图像的控件，Image控件有多种构造函数：

new Image，用于从ImageProvider获取图像。 new Image.asset，用于使用key从AssetBundle获取图像。 new Image.network，用于从URL地址获取图像。 new Image.file，用于从File获取图像。 为了自动执行像素密度感知资源分辨率，使用AssetImage指定图像，需要确保在控件树中的图片控件上方存在MaterialApp、WidgetsApp和MediaQuery控件。

下面是一个从URL地址获取图像的实例，并通过scale属性设置缩放比例：

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(),     ),   ); } 下面是一个从本地文件目录中获取图像的实例：

import 'package:flutter/material.dart';

class ImageDemo extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new Scaffold(       appBar: new AppBar(         title: new Text('从本地获取图像'),       ),       body: new Center(         child: new Container(           decoration: new BoxDecoration(             backgroundImage: new BackgroundImage(               image: new AssetImage('images/flutter.jpeg'),             ),           )         )       ),     );   } }

void main() {   runApp(     new MaterialApp(       title: 'Flutter教程',       home: new ImageDemo(),     ),   ); } 上面的代码会在一个容器里显示一张图片，但是不同的手机有不同的像素比率，这时就需要根据手机的像素比率来加载不同图片，做法很简单，只需要在图片同级目录下创建2.0x/…和3.0/…的目录就可以了。