Image:
加载网络图片:
Image.network(
"路径',
height:n,
weight:n,
fit:BoxFit.cover, 显示方式
)
在Container组件中加载图片的第二种方式,在decoration种加载
Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color:Colors.orange,
borderRadius: BorderRadius.circular(150),
image:DecorationImage(
image: NetworkImage("路径"),
fit:BoxFit.cover 显示方式
)
)
)
ClipOval:
圆角组件,相当于一个已经有圆角的div,若子组件是矩形,将会以圆显示,否则为椭圆
ClipOval(
child:组件
)
Image加载本地图片:
(1)在项目根目录创建images文件夹->创建2.0x、3.0x、4.0x文件夹以满足屏幕自适应图片->在pubspec.yaml文件中,将注释掉的assets恢复,并添加-images/图片路径
调用:
Image.asset('images/路径');
图片也可以不放进2.0x等文件夹内,但必须创建2.0x和3.0x,图片路径也必须添加进assets内
代码示例:
import 'package:flutter/material.dart';
void main(){
runApp(App());
}
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home:Scaffold(
appBar:AppBar(
title:Text('aac')
),
body:Home4()
)
);
}
}
class Home extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child:Container(
child: Image.network("https://i0.hdslb.com/bfs/archive/6c9fa26d543f52553ad24b2558327869506f1247.jpg@1375w_605h_1c_100q.webp"
,alignment: Alignment.topCenter,
color: Colors.yellow, //图片背景颜色
colorBlendMode: BlendMode.colorBurn, //图片混合,配合color使用
fit: BoxFit.contain,//显示方式
repeat: ImageRepeat.repeat, //重复
),
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color:Colors.orange
),
)
);
}
}
class Home2 extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child:Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color:Colors.orange,
// borderRadius: BorderRadius.all(Radius.circular(150))
borderRadius: BorderRadius.circular(150),
image:DecorationImage(
image: NetworkImage("https://i0.hdslb.com/bfs/sycp/creative_img/202004/1c720bb11be03bec3e8a37d6bf2dbfaf.jpg@1375w_605h_1c_100q.webp"),
fit:BoxFit.cover
)
),
)
);
}
}
class Home3 extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child:Container(
child: ClipOval(
child:Image.network("https://i0.hdslb.com/bfs/sycp/creative_img/202004/1c720bb11be03bec3e8a37d6bf2dbfaf.jpg@1375w_605h_1c_100q.webp",
height:100,
width:100,
fit:BoxFit.cover
) ,
),
)
);
}
}
class Home4 extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child:Container(
child: ClipOval(
child:Image.asset("images/2.0x/钢铁侠4.jpg",
height:100,
width:100,
fit:BoxFit.cover
) ,
),
)
);
}
}