Flutter学习笔记2:闪屏页

第一步：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差不多,但是此属性不允许显示超过源图片大小，可小不可大

效果：

1F4AFF94-3CBF-4024-84A3-DFE35B717369.png

全部代码：
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),
    );
  }
}