第一步:pubspec.yaml配置图片路径
assets:
- images/loading.jpg
- images/timg.jpg
第二步写一个类SplashPage
class SplashPage extends StatefulWidget {
@override
_SplashState createState() => new _SplashState();
}
StatefulWidget(有状态组件):
持有状态可能在Widget生命周期中发生变化,实现它需要两个类:
一个StatefulWidget。
一个State:一个StatefulWidget类本身是不变的,但是State类在Widget生命周期中始终存在。
第三步:启动页面等待2秒
class _SplashState extends State<SplashPage> {
@override
void initState() {
new Future.delayed(Duration(seconds: 2), () {
print("HD钱包启动...");
});
}
第四步构建页面:
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
child: Image.asset("images/timg.jpg", fit: BoxFit.cover),
);
}
这里有一个图片组件:
Image组件有多种构造函数:
.new Image:从ImageProvider获取图像。
.new Image.asset:加载资源图片
.new Image.file:加载本地图片
.new Image.network:加载网路图片
new Image.memory:加载Uint8List资源图片
BoxFit:
BoxFit.none
原始大小
BoxFit.fill
全图显示,显示可能拉伸,充满
BoxFit.contain
全图显示,显示原比例,不需充满
BoxFit.cover
显示可能拉伸,可能裁剪,充满
BoxFit.fitWidth
显示可能拉伸,可能裁剪,宽度充满
BoxFit.fitHeight
显示可能拉伸,可能裁剪,高度充满
BoxFit.scaleDown
效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大
效果:

全部代码:
pubspec.yaml
name: wechat
description: A new Flutter application.
dependencies:
flutter:
sdk: flutter
flutter_webview_plugin: "^0.2.1+2"
date_format: "^1.0.4"
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
assets:
- images/loading.jpg
- images/timg.jpg
Splash.dart
import 'package:flutter/material.dart';
import 'dart:async';
class SplashPage extends StatefulWidget {
@override
_SplashState createState() => new _SplashState();
}
class _SplashState extends State<SplashPage> {
@override
void initState() {
new Future.delayed(Duration(seconds: 2), () {
print("HD钱包启动...");
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
child: Image.asset("images/timg.jpg", fit: BoxFit.cover),
);
}
}
网友评论