介绍:
Image 图片组件是用来显示图像的组件,Image 组件有很多构造函数(命名构造函数)
如:
Image.file:从文件获取图片 Image.asset: 本地图片 Image.network:从网络加载 Image.memory:
官方介绍截图如下:
以下只对Image.network和Image.asset进行讲解:
一.Image 组件的常用属性
属性名称 | 类型 | 说明 |
---|---|---|
alignment | Alignment | 图片的对齐方式 |
color和colorBlendMode | 设置图片的背景颜色,通常和 colorBlendMode 配合一起使用,这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合,绿色背景和图片红色的混合 | |
fit | BoxFit | fit 属性用来控制图片的拉伸和挤压,这都是根据父容器来的。 BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。 BoxFit.contain:全图显示,显示原比例,可能会有空隙。 BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。湖北众猿腾网络科技有限公司 BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。 BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。 BoxFit.scaleDown:效果和 contain 差不多,但是此属性不允许显示超过源图片大小,可小不可大。 |
repeat | ImageRepeat | ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。 ImageRepeat.repeatX: 横向重复,纵向不重复。 ImageRepeat.repeatY:纵向重复,横向不重复。 width 宽度一般结合 ClipOval 才能看到效果 height 高度一般结合 ClipOval 才能看到效果 |
width | 宽度一般结合 ClipOval 才能看到效果 | |
height | 高度一般结合 ClipOval 才能看到效果 |
二.使用Image.network 构造函数的Image组件
Image.network 是用来加载网络图片的,在源码中可以看到Image.network构造函数的src参数不为可选命名参数,所以在调用这一个image.network()构造函数的时候,src是为必传参数,src为图片的网址。
例子:
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; //Image图片组件讲解 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", home: Scaffold( appBar: AppBar( title: Text('This is a demo'), elevation: 15.0, ), //设置标题阴影 body: MyHome(), ), theme: ThemeData( //设置主题颜色 primarySwatch: Colors.yellow), ); } } class MyHome extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Container( child: Image.network( "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4206390884,2201274564&fm=111&gp=0.jpg", alignment: Alignment.center, //横向拉伸 fit: BoxFit.fitWidth, ), color: Colors.yellow, height: 400, )); } }
效果:
三.使用Image.asset 构造函数的Image组件
Image.asset是用来加载本地资源图片的,在源码中可以看到 Image.asset构造函数的name参数不为可选命名参数,所以在调用这一个image.network()构造函数的时候,name是为必传参数,name为图片的地址。
配置本地资源图片的步骤:
1)在根目录创建images文件夹 ,在images文件夹下创建 名为2.0x和3.0x的文件夹(还可以添加4.0x文件夹等,2.0x和3.0x是必须创建的目录), 在2.0x和3.0x文件夹中放入相同的图片(系统会根据手机的分辨率选择对应文件夹中的图片资源)。
如图:
2)在pubspec.yaml文件的flutter 下面添加图片地址
如图(注意空格):
此时就配置好了图片,可以在代码里使用了。
例子:
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; //Image图片组件讲解 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", home: Scaffold( appBar: AppBar( title: Text('This is a demo'), elevation: 15.0, ), //设置标题阴影 body: MyHome(), ), theme: ThemeData( //设置主题颜色 primarySwatch: Colors.blue), ); } } class MyHome extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Container( child: Image.asset( // "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4206390884,2201274564&fm=111&gp=0.jpg", "images/image01.jpeg", alignment: Alignment.center, //横向拉伸 fit: BoxFit.fitWidth, ), color: Colors.yellow, height: 400, )); } }
效果:
四.使用圆形图片
要实现加载图片后圆形显示(类似头像的效果),有两种方式:
方法1: 使用Container组件,并使用Container中的decoration参数
方法2: 使用ClipOval组件
方法一代码例子:
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; //Image图片组件讲解(圆形图片) void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", home: Scaffold( appBar: AppBar( title: Text('This is a demo'), elevation: 15.0, ), //设置标题阴影 body: MyHome(), ), theme: ThemeData( //设置主题颜色 primarySwatch: Colors.yellow), ); } } class MyHome extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Container( decoration: BoxDecoration( //使用了decoration参数 borderRadius: BorderRadius.circular(150), //设置弧度 image: DecorationImage( image: NetworkImage( 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1488907392,4056383417&fm=26&gp=0.jpg'), fit: BoxFit.cover)), height: 300, width: 300, ) ); } }
方法二代码例子:
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; //Image图片组件讲解(圆形图片) void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", home: Scaffold( appBar: AppBar( title: Text('This is a demo'), elevation: 15.0, ), //设置标题阴影 body: MyHome(), ), theme: ThemeData( //设置主题颜色 primarySwatch: Colors.yellow), ); } } class MyHome extends StatelessWidget { @override Widget build(BuildContext context) { child: ClipOval( //使用ClipOval控件 child: Image.network( 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1488907392,4056383417&fm=26&gp=0.jpg', width: 300, height: 300, fit: BoxFit.cover, ), ) ); } }
效果: