美文网首页
Flutter 学习(一)

Flutter 学习(一)

作者: 潔雲 | 来源:发表于2020-04-07 14:57 被阅读0次

    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 上方存在MaterialAppWidgetsAppMediaQuery窗口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学习。

    相关文章

      网友评论

          本文标题:Flutter 学习(一)

          本文链接:https://www.haomeiwen.com/subject/jehnphtx.html