Flutter 学习（一）

1.图片控件

• new Image - 用于从ImageProvider获取图像；
• new Image.asset - 使用key从AssetBundle获得图像；
• new Image.network - 从网络URL中获取图片；
• new Image.file - 从本地文件中获取图片；
• new Image.memory - 用于从Unit8List获取图像；

在加载项目中的图片资源时，为了让Image能够根据像素密度自动适配不同的分辨率的图片，使用AssetImage指定图像，并确保在widget树中的“Image”widget 上方存在MaterialApp，WidgetsApp或MediaQuery窗口widget。

2.Image支持的图片格式

Image支持以下类型的图片：JPEG，PNG，GIF，Animated GIF，WebP，Animated WebP，BMP和WBMP。

3.加载静态图片

• 需要在pubspec.yaml声明图片路径
• 使用AssetImage访问图片

pubspec.yaml:

assets:
    - images/icon.png

Image(
    height:26,
    width:26,
    image:AssetImage(icon,png),
),

除了上面的构造方法制定AssetImage之外，还可以使用Image.asset来加载静态图片:

Image.asset(icon.png,
        width:26,
        height:26,
)

4.如何加载本地图片

• 加载完整路径的本地图片

import 'dart:io';
Image.file(File('XXXXX')),

• 加载相对路径的本地图片
  (1）在pubspec.yaml中添加path_provider插件
  (2) 导入头文件

class _MyPageState extends State<MyPage>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder(future: _getLocalFile("Pictures/我的.jpg"),
        builder: (BuildContext context,AsyncSnapshot<File> snapshot){
        return snapshot.data != null ?Image.file(snapshot.data):Container();
        },
      ),
    );
  }
  Future<File> _getLocalFile(String filename) async{
    String dir = (await getExternalStorageDirectory()).path;
    File file = new File('$dir/$filename');
    return file;
  }
}

其中获取的路径$dir是你项目的路径。
如 我自己的dir = '/storage/emulated/0/Android/data/sjy.cslg.tcm/files/'

5.如何设置placeholder？

设置placeholder需要借助FadeInImage,它能够从内存，本地资源中加载placeholder

（1） 安装transparent_image插件
（2）

Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        //从网络加载
        FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image:
                'http://n.sinaimg.cn/photo/transform/700/w1000h500/20200326/5b30-irkazzv3853260.jpg'),
        //从本地加载
        FadeInImage.assetNetwork(
            placeholder: 'images/book.png', image: 'images/book.png'),
      ],
    );

6.如何设置图片缓存

在flutter中我们可以借助cached_network_image插件从网络上加载图片，并且将其缓存到本地，以供下次使用。

Widget build(BuildContext context) {
    return Center(
      child: CachedNetworkImage(
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
        imageUrl: "XXXX"),

    );
  }

7.加载Icon

可以使用Flutter内置的material_fonts:

Icon(Icons.android)

flutter所有的icon：

flutter所有icon

8.使用自定义的Icon

（1）先下载图标字体文件（.ttf后缀）。以阿里图标库为例。
我们先加入到购物车，然后添加到项目。

下载之后解压

复制.tff后缀的文件到项目中，并在pubspec.yaml里面配置：
[图片上传失败...(image-91b0c0-1586242462147)]

  fonts:
     - family: iconfont
       fonts:
         - asset: images/iconfont.ttf

 Widget build(BuildContext context) {
    return Center(
      child: Icon(IconData(0xe629,fontFamily: 'iconfont'),size: 100,color: Colors.deepOrange,)
    );
  }

其中这个0xe629是怎么来的呢？
在解压的文件里打开这个html

注：按照慕课网课程Flutter从入门到进阶 实战携程网App学习。