Flutter 浅析之Image

标签: flutter  Android  IOS  android  ios  java  objective-c  

技术无止境,只怕不学习啊,Flutter 我们开始吧

Flutter Image图片

添加 Image空间 首相Image有四种加载图片的方式
network 加载网络图片
file 本地文件
asset 资源目录
主要讲解asset 资源目录

添加图片文件夹

在lib 同一个目录下添加images文件夹
在这里插入图片描述
把需要使用的图片复制到images文件夹中然后在pubspec.yaml中配置
在这里插入图片描述
注意格式

在容器中添加Image读取资源图片

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            child: Image.asset(   // network 加载网络图片,file 本地文件,asset资源目录
              "images/timg.jpeg",
            ),
            width: 200, // Container 的宽
            height: 200, // Container 的高
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

fit图片填充 基本属性已经列出可以自行演示

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.lightBlue,
//            child: Image.network(
//              'https://space.bilibili.com/165659472',
//            ) ,
            child: Image.asset(   // network 加载网络图片,file 本地文件,asset资源目录
              "images/timg.jpeg",
                fit: BoxFit.fill, // contain 保持原图比例,fill填充图片图片不保帧,
                                      // fitWidth横向填充图片不会被裁减,fitHeight纵向填充图片不会被裁减
                                      //cover 图片可能被裁切,但是保帧,scaleDown原图片大
            ),
            width: 200, // Container 的宽
            height: 200, // Container 的高
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

图片混合模式设置colorBlendMode 需要设置color

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.lightBlue,
//            child: Image.network(
//              'https://space.bilibili.com/165659472',
//            ) ,
            child: Image.asset(   // network 加载网络图片,file 本地文件,asset资源目录
              "images/timg.jpeg",
                fit: BoxFit.fill, // contain 保持原图比例,fill填充图片图片不保帧,
                                      // fitWidth横向填充图片不会被裁减,fitHeight纵向填充图片不会被裁减
                                      //cover 图片可能被裁切,但是保帧,scaleDown原图片大小
              color: Colors.greenAccent,  // 图片混合 设置颜色
              colorBlendMode: BlendMode.darken, // 图片混合模式
            ),
            width: 200, // Container 的宽
            height: 200, // Container 的高
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述
图片重复repeat

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.lightBlue,
//            child: Image.network(
//              'https://space.bilibili.com/165659472',
//            ) ,
            child: Image.asset(   // network 加载网络图片,file 本地文件,asset资源目录
              "images/timg.jpeg",
                fit: BoxFit.contain, // contain 保持原图比例,fill填充图片图片不保帧,
                                      // fitWidth横向填充图片不会被裁减,fitHeight纵向填充图片不会被裁减
                                      //cover 图片可能被裁切,但是保帧,scaleDown原图片大小
              color: Colors.greenAccent,  // 图片混合 设置颜色
              colorBlendMode: BlendMode.darken, // 图片混合模式

              repeat: ImageRepeat.repeatY, // 图片不重复noRepeat ,repeat重复把容器填满,repeatX横向重复,repeatY纵向重复

            ),

            width: 200, // Container 的宽
            height: 200, // Container 的高
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

Image 就介绍到这里,其他的可以根据自己的使用查询API

版权声明:本文为qq_34476727原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34476727/article/details/107451982

智能推荐

Flutter组件学习(二)—— Image

Flutter组件学习(二)—— Image 24K纯帅豆关注 12018.11.30 11:07:56字数 1,006阅读 26,102 序言 上一节中,我们讲了 Flutter 中 Text 组件的一些用法以及 API,本节我们继续学习 Flutter 中的 Image 组件,同样...

Flutter 中 image 图片组件

1. 图片的常用属性 1. alignment 对齐方式 。值为Alignment类型,如:Alignment.topCenter; 2. color 颜色。值为Colors类型,如:Colors.red; 3. colorBlendMode 颜色混合模式。要与color一起设置才有效果,值为BlendMode类型,如:BlendMode.darken; 4.&nbs...

冒泡排序,及改进方式,性能优化400%>>>附图解加源码

首先源码附上,源码中带有注释,看不懂没关系,源码后面附带图解,最后附上代码效率提升图 源码如下: 方案一:其实实现很简单,两层循环,每次内层迭代出最大的一个值,将其放入数组最后一个位置,外层循环的末端便往前移一位。其原理如下图 方案一代码块: 方案二:优化改进 仔细观察上面的图,我们不难发现当迭代到图下这样的情况时,其实已经全排序好了,但是我们还是需要对它进行1,2,3,4,5,6的迭代,这些情况...

css3常用选择器

先介绍一下基本选择器,如下几种 *:通配符。选择页面的所有元素 E:元素选择器。对页面的一些元素进行选择,如p,div,li等 .class:类选择器 #id:id选择器。一个Id在一个页面中只能选择,这是和类选择器的区别 E F:后代选择器。如ul li。选中ul下的li E>F:子元素选择器。如下,可以用 h1 > strong {color:red;}使h1的子元素strong变...

python is not set from command line or npm configuration

问题 猜测原因  python版本冲突 解决方案  去官网找到最新版本python 点击下载,注意记住你下载的目录,下载好以后,打开这个目录下的文件夹,Python310, 整个文件夹复制一下 在项目里运行npm config list --json 找到python的路径   我的是 C:\\Python27\\python.exe 说明项目里用的还是py...

猜你喜欢

Java8 Stream流操作

前言 我们常常需要将一个容器转化成另一个容器,或是对这个容器中的数据进行批量处理,这时使用Stream流可以大大减少我们的工作量。 1 Stream概述 Java 8 是一个非常成功的版本,这个版本新增的Stream,配合同版本出现的 Lambda ,给我们操作集合(Collection)提供了极大的便利。 那么什么是Stream? Stream将要处理的元素集合看作一种流,在流的过程中,借助St...

带你玩转Visual Studio——带你跳出坑爹的Runtime Library坑

在Windows下进行C++的开发,不可避免的要与Windows的底层库进行交互,然而VS下的一项设置MT、MTd、MD和MDd却经常让人搞迷糊,相信不少人都被他坑过,特别是你工程使用了很多第三库的时候,及容易出现各种链接问题。看一下下面这个错误提示:  LIBCMT.lib(_file.obj) : error LNK2005: ___initstdio already defined...

git 设置 gitignore 忽略 __pycache__

清除git缓存中的pycache 直接删掉硬盘上的文件 如果我想保留硬盘上的这个文件,而只删除版本管理中的文件,就需要加入--cached参数。 切换分支出现问题 尽管我已经删除了__pycache__,硬盘也没有了,但是切换分支的时候依然是会提示本地重写的情况。 提示:需要我在切换分支之前,提交一次更新。 提交了更新之后,再来尝试切换分支,如下: 成功了,说明当做了任何变更之后,切换分支前需要执...

人生苦短,我用Python(二)— 爬取会议网站 EasyChair Smart CFP

寒假留校帮学长写了个爬虫,抓取会议网站上一些CFP信息。想着把一些知识点、坑点记下来,一来做个小总结给工作收收尾,二是以后再遇到好从容应对。 这是我写的第二个比较完善的爬虫了,比第一个要简单许多,完全过程化的代码,而且easychair这个网站页面布局比较友好,适合python新手、前端小白入门练习。但这个网站反爬比较厉害,写爬虫的过程中就被ban了好几次…… 制定抓取...

(三)Single Threaded Execution模式

一、定义 一个线程执行。有时也称为Critical Section(临界区)。   二、模式案例 案例: 假设有三个人,频繁地通过一扇门,规定每次只能通过一个人,当通过一个人时,程序会将通过的总人次加1,同时记录该次通过人的姓名和出生地。   门的定义:   人的定义     测试类     多次执行后发现可能出现以下结果: &...