Flutter 基础控件 Image Widget
1. 配置 pubspec.yaml
assets:
- assets/assets_image.jpg
- assets/check-circle.png
- assets/image_appbar.jpg
image.png
2. 把资源图片放入包assets
- 如果根目录没有assets新建即可
- 把所需要的图片复制进去即可
- 这里一定要注意assets的缩进，前面为2个空格，图片也是2个空格，否则不显示图片
- 图片如果显示不出来的话，需要重新安装apk，热加载不会更新图片文件
image.png
3. Image 加载 Assets资源图片
Image.asset("assets/assets_image.png"),
Text(
"从项目assert目录读取",
textAlign: TextAlign.center,
),
Image(
image: AssetImage("assets/assets_image.png"),
width: 200,
height: 130,
),
Text(
"AssetImage读取",
textAlign: TextAlign.center,
),
image.png
Image 加载 文件图片
Image.file(
File('/sdcard/img.png'),
width: 800,
height: 80,
),
Image(
image: FileImage(File('/sdcard/img.png')),
),
Text(
"从文件图片图片",
textAlign: TextAlign.center,
),
Image 加载网络图片
Image.network(imageUrl),
Text(
"读取网络图片",
textAlign: TextAlign.center,
),
Image(
image: NetworkImage(imageUrl),
),
Text(
"用NetworkImage读取网络图片",
textAlign: TextAlign.center,
),
image.png
Image自定义拆件图片，显示原型图片头像，圆角图片
///加载圆角图片
CircleAvatar(
backgroundColor: Colors.brown.shade800,
child: Text("圆角头像"),
backgroundImage: AssetImage("assets/assets_image.png"),
radius: 50.0,
),
Text(
"加载圆角图片",
textAlign: TextAlign.center,
),
ImageIcon(NetworkImage(imageUrl)),
Text(
"ImageIcon",
textAlign: TextAlign.center,
),
ClipRRect(
child: Image.network(
imageUrl,
scale: 8.5,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
Text(
"ClipRRect",
textAlign: TextAlign.center,
),
Container(
width: 120,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(imageUrl), fit: BoxFit.cover),
),
),
Text(
"BoxDecoration",
textAlign: TextAlign.center,
),
ClipOval(
child: Image.network(
imageUrl,
scale: 8.5,
),
),
Text(
"ClipOval",
textAlign: TextAlign.center,
),
image.png
完整代码
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ImageExample extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ImageExampleState();
}
}
class ImageExampleState extends State<ImageExample> {
ImageInfo imageInfo;
String imageUrl =
'https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/776eaf92140f6f8f3c3f39fb51de2cc4~300x300.image';
@override
void didChangeDependencies() {
super.didChangeDependencies();
///图片加载监听处理
Image.asset("assets/flutter-mark-square-64.png")
.image
.resolve(createLocalImageConfiguration(context))
.addListener(
ImageStreamListener((ImageInfo image, bool synchronousCall) {
imageInfo = image;
}, onError: (dynamic exception, StackTrace stackTrace) {}));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Image Widget"),
),
body: CustomScrollView(
slivers: <Widget>[
SliverPadding(
padding: const EdgeInsets.all(20.0),
sliver: SliverList(
delegate: SliverChildListDelegate(
<Widget>[
Image.asset("assets/assets_image.jpg"),
Text(
"从项目assert目录读取",
textAlign: TextAlign.center,
),
Image(
image: AssetImage("assets/assets_image.jpg"),
width: 200,
height: 130,
),
Text(
"AssetImage读取",
textAlign: TextAlign.center,
),
Image.file(
File('/sdcard/img.png'),
width: 800,
height: 80,
),
Image(
image: FileImage(File('/sdcard/img.png')),
),
Text(
"从文件图片图片",
textAlign: TextAlign.center,
),
Image.network(imageUrl),
Text(
"读取网络图片",
textAlign: TextAlign.center,
),
Image(
image: NetworkImage(imageUrl),
),
Text(
"用NetworkImage读取网络图片",
textAlign: TextAlign.center,
),
///加载圆角图片
CircleAvatar(
backgroundColor: Colors.brown.shade800,
child: Text("圆角头像"),
backgroundImage: AssetImage("assets/assets_image.png"),
radius: 50.0,
),
Text(
"加载圆角图片",
textAlign: TextAlign.center,
),
ImageIcon(NetworkImage(imageUrl)),
Text(
"ImageIcon",
textAlign: TextAlign.center,
),
ClipRRect(
child: Image.network(
imageUrl,
scale: 8.5,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
Text(
"ClipRRect",
textAlign: TextAlign.center,
),
Container(
width: 120,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(imageUrl), fit: BoxFit.cover),
),
),
Text(
"BoxDecoration",
textAlign: TextAlign.center,
),
ClipOval(
child: Image.network(
imageUrl,
scale: 8.5,
),
),
Text(
"ClipOval",
textAlign: TextAlign.center,
),
],
),
),
)
],
),
);
}
}
网友评论