看一段简单的Flutter代码,直接复制到main.dart就可以
import 'package:flutter/material.dart';
import 'dart:ui';
void main() => runApp(ImageViewPage());
class ImageViewPage extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: new Scaffold(
appBar: new AppBar(
title: new Text("Flutter Image"),
),
body: new ListView(
children: [assetsImage, networkImage],
),
),
);
}
// assets图片
Container assetsImage = new Container(
child: new Image.asset(
"assets/images/flutter_img.jpeg",
width: window.physicalSize.width,
height: 240.0,
//类似于Android的scaleType 此处让图片尽可能小 以覆盖整个widget
fit: BoxFit.cover,
),
);
// 网络图片
Container networkImage = new Container(
// 距离上一个组件的margin
margin: EdgeInsets.all(10.0),
child: new ClipRRect(
// 圆角
borderRadius: BorderRadius.circular(10.0),
child: new Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554110093883&di=9db9b92f1e6ee0396b574a093cc987d6&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20%2F151%2Fw2048h1303%2F20180429%2F37c0-fzvpatr1915813.jpg",
width: window.physicalSize.width,
height: 240.0,
//类似于Android的scaleType 此处让图片尽可能小 以覆盖整个widget
fit: BoxFit.cover,
),
));
}
效果
Flutter 加载assets图片
1.lib 同级目录下新建一个assets文件夹
2.pubspec.yaml 配置
assets:
- assets/images/flutter_img.jpeg
然后点击Packages get
以下代码就可以加载assets下的图片
// assets图片
Container assetsImage = new Container(
child: new Image.asset(
"assets/images/flutter_img.jpeg",
width: window.physicalSize.width,
height: 240.0,
fit: BoxFit.cover,
),
);
Flutter 加载网络图片
child: new Image.network(
"imageUrl",
// 屏幕宽度
width: window.physicalSize.width,
height: 240.0,
fit: BoxFit.cover,
),
设置图片圆角
new ClipRRect(
borderRadius: BorderRadius.circular(6.0),
child: new Image.network(
)
),