Flutter04-2020图片加载
程序员文章站
2022-05-30 09:21:56
...
目录
- 远程图片
- 圆型图片设置
- 本地图片
一、远程图片
代码展示:
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 demo")
),
body: HomeContent()
)
);
}
}
//定义背景颜色decoration
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Image.network(
"http://qiniu.xingheaoyou.com/1.jpg",
alignment: Alignment.topRight,//图片显示左上角
color:Colors.blue,//图片颜色
colorBlendMode: BlendMode.screen,//图片混合模式,会和color进行叠加
// fit:BoxFit.cover,//可能拉伸,可能剪切,充满整个容器,还不变形,
// fit:BoxFit.fill,//充满屏幕,会变形
// fit:BoxFit.contain//默认是contain, fitWidth 横向充满, fitHeight 纵向充满
fit:BoxFit.cover,//覆盖全部,用的最多
// repeat: ImageRepeat.repeat, //平铺图片,一般默认是一张,这里设置会出现很多张
),//展示网络图片地址
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.yellow
),
)
);
}
}
效果图:
二、圆型图片设置
代码:
//定义背景颜色decoration
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.yellow,
//圆型图像方法一
// borderRadius: BorderRadius.all(
// Radius.circular(150)
// ),
//圆型图像方法二
// borderRadius: BorderRadius.circular(150),
//加载图片
image: DecorationImage(
image: NetworkImage('http://qiniu.xingheaoyou.com/1.jpg'),
fit: BoxFit.cover
)
),
),
);
}
}
方法三设置圆形图片:
//定义背景颜色decoration
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: ClipOval(
child: Image.network(
'http://qiniu.xingheaoyou.com/1.jpg',
height:100,
width: 100, //如果不设置宽高就会根据图片变形,可能是椭圆,设置固定的话,可以确认是一个圆形
fit:BoxFit.cover,
),
),
),
);
}
}
三、本地图片加载
1.首先需要在目录里面建images,而且固定的2.0x, 3.0x,4.0x文件夹
然后,将你需要的图片,要在这个文件中配置,目前是你每一个你要用的都要这样写。
//加载本地的图片
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Image.asset(
'images/1.png',
fit:BoxFit.cover
),
width:300,
height: 300,
),
);
}
}