Flutter Widget之Image

Widget：https://flutter.io/docs/development/ui/widgets
Image：https://docs.flutter.io/flutter/widgets/Image-class.html

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:cached_network_image/cached_network_image.dart';

class ImageDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _ImageDemoPagePageState();
}

class _ImageDemoPagePageState extends State<ImageDemoPage> {

  @override
  void initState() {
    super.initState();
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text('Image Demo'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              // 加载项目中的图片, 在 pubspec.yaml 文件中添加 assets
              new Image.asset('images/lion.jpg', width: 200.0, height: 150.0,),
              new Image.asset(
                'images/husky.jpg',
                fit: BoxFit.cover, // 缩放方式，取值 fill contain cover fitWidth fitHeight none scaleDown
                width: 200.0,
                height: 150.0,
              ),
              // 加载网络图片
              new Image(
                image: new NetworkImage('http://www.yezhou.me/images/flutter/tangyixin.jpg'),
                width: 200.0,
                height: 150.0,
              ),
              // 用占位符淡入图片, 使用 transparent_image(https://pub.dartlang.org/packages/transparent_image) 包作为一个简单的透明占位图
              new FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                fadeInDuration: const Duration(seconds: 50), // 持续时间，默认 700 ms
                image: 'http://www.yezhou.me/images/flutter/tang.jpg',
                width: 200.0,
                height: 150.0,
              ),
              // 使用缓存图片, 使用 cached_network_image(https://pub.dartlang.org/packages/cached_network_image)
              // 除了缓存之外, cached_image_network包在加载时还支持占位符和淡入淡出图片
              new CachedNetworkImage(
                placeholder: new CircularProgressIndicator(),
                imageUrl: 'http://www.yezhou.me/images/flutter/tangyixin.jpg',
                errorWidget: new Image.asset('images/pic1.jpg', width: 200.0, height: 150.0),
                width: 200.0,
                height: 150.0,
              ),
              //
              Image.network(
                'http://www.yezhou.me/images/flutter/tang.jpg',
                width: 200.0,
                height: 150.0,
              ),
            ],
          )
        )
    );
  }
}