Flutter中image 图片组件
1. 图片的常用属性
1. alignment 对齐方式 ；
2. color 颜色；
3. colorBlendMode 颜色混合模式。要与color一起设置才有效果；
4. fit 图片的填充方式。常用的有几下几种：
(1). BoxFit.fill 全图显示，图片会被拉伸，并充满父容器；
(2). BoxFit.contain 全图显示，显示原比例，可能会有空隙；
(3). BoxFit.cover 图片充满，显示可能拉伸，可能裁切，但不变形；
(4). BoxFit.fitWidth 宽度横向充满，显示可能拉伸， 可能裁切；
(5). BoxFit.fitHeight 高度竖向充满，显示可能拉 伸，可能裁切；
(6). BoxFit.scaleDown 效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大；
5. repeat 平铺。常用的有以下几种：
(1). ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整 个画布；
(2). ImageRepeat.repeatX: 横向重复，纵向不重复；
(3). ImageRepeat.repeatY：纵向重复，横向不重复；
6. width 宽度。一般结合 ClipOval 才能看到效果；
7. height 高度。一般结合 ClipOval 才能看到效果；
2. 加载远程图片
使用 Image.network() 来加载远程图片。
代码如下所示：
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 导航条
appBar:AppBar(title:Text('Flutter App')),
// 主体
body:HomeContent(),
),
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// 添加网络远程图片
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Container(
// 将图片作为子元素
child:Image.network(
"http://www.ionic.wang/statics/index/images/ionic4.png",
// 对齐方式
alignment: Alignment.topCenter,
// 图片颜色混合
color:Colors.purple,
colorBlendMode:BlendMode.darken,
// 图片填充方式
fit:BoxFit.fitHeight,
// 重复-指定重复方向
// repeat: ImageRepeat.repeatY,
),
// 宽度
width:400,
// 高度
height:400,
// 容器装饰
decoration:BoxDecoration(
// 颜色
color:Colors.yellow,
// 倒圆角
borderRadius: BorderRadius.all(
Radius.circular(50)
)
),
)
);
}
}效果图如下：
上面图片的颜色看起来有点怪怪的，就是用了颜色混合的效果。
3. 加载本地图片
使用 Image.asset() 加载本地图片。
加载本地图片要复杂一些，分为以下几步：
1. 在项目的根目录下添加images文件夹，放置需要加载的默认图片在里面。为了适配不同分辨率的图片，新建2.x与3.x的文件夹，放置2倍像素与3倍像素的图片。如果有必要，4倍像素的图片也加上，但2倍像素与3倍像素的图片是必须的；
2. 在pubspec.yaml里配置图片的加载地址；
代码如下所示：
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 导航条
appBar:AppBar(title:Text('Flutter App')),
// 主体
body:HomeContent(),
),
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// 加载本地图片
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Container(
// 在图片文件夹中放置图片，2.x与3.x的都要有
// 配置pubspec.yaml
// 添加本地图片
child:Image.asset("images/a.jpeg"),
height:500,
width:300,
)
);
}
}效果图如下：
4. 开发圆形图片效果
圆形图片是开发中经常会遇到的一种效果，多用于用户头像。
1. 添加图片在容器中，给容器倒圆角；
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 导航条
appBar:AppBar(title:Text('Flutter App')),
// 主体
body:HomeContent(),
),
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// 把图片做为背景，制作一个圆形图
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Container(
// 宽度
width:400,
// 高度
height:400,
// 容器装饰
decoration:BoxDecoration(
// 颜色
color:Colors.yellow,
// 另一种倒圆角的方式
borderRadius:BorderRadius.circular(200),
// 将图片作为背景,结合倒圆角实现圆形图片
image: DecorationImage(
image:NetworkImage("http://www.ionic.wang/statics/index/images/ionic4.png"),
fit:BoxFit.cover
)
),
)
);
}
}效果图如下：
2. 用Flutter提供的特定组件ClipOval；
代码如下所示：
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 导航条
appBar:AppBar(title:Text('Flutter App')),
// 主体
body:HomeContent(),
),
theme: ThemeData(primarySwatch:Colors.yellow),
);
}
}
// 制作圆形图的另一种方式
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Container(
// 倒圆角50%
child:ClipOval(
child:Image.network(
"http://www.ionic.wang/statics/index/images/ionic4.png",
height:200,
width:200,
fit:BoxFit.cover
),
)
)
);
}
}效果图如下：
腾讯云开发者
