【Flutter 组件】004-基础组件：图片及 ICON

news2024/11/24 20:03:35

【Flutter 组件】004-基础组件：图片及 ICON

文章目录

  • 【Flutter 组件】004-基础组件：图片及 ICON
  • 一、图片
    • 1、Image
      • 概述
      • Image 的几个构造方法
      • 常用属性
      • ImageProvider
    • 2、从 asset 中加载图片
      • 第一步：准备图片
      • 第二步：使用图片
      • 第三步：运行结果
      • 不同的 fit 方式代码示例
    • 3、从网络加载图片
      • 第一步：准备一个网络图片地址
      • 第二步：使用图片
      • 第三步：运行结果
      • 带占位图片的网络图片代码示例
    • 4、Image 缓存
  • 二、ICON
    • 1、概述
    • 2、与图片相比的优势
    • 3、使用 Material Design 字体图标
    • 4、使用自定义字体图标
      • 第一步：导入字体图标文件
      • 第二步：定义一个`MyIcons`类
      • 第三步：使用
  • M、扩展阅读
  • N、参考资料

一、图片

1、Image

概述

Flutter 中，我们可以通过 Image 组件来加载并显示图片，Image 的数据源可以是 asset 、文件、内存以及网络。

Image 是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

Image 的几个构造方法

方法释义
Image()从ImageProvider中获取图片，从本质上看，下面的几个方法都是他的具体实现。
Image.asset(String name)从AssetBundler中获取图片
Image.network(String src)显示网络图片
Image.file(File file)从File中获取图片
Image.memory(Uint8List bytes)从Uint8List中显示图片

常用属性

  1. alignment → AlignmentGeometry - 图像边界内对齐图像。
  2. centerSlice → Rect - 九片图像的中心切片。
  3. color → Color - 该颜色与每个图像像素混合 colorBlendMode。
  4. colorBlendMode → BlendMode - 用于 color 与此图像结合使用。
  5. fit → BoxFit - 图像在布局中分配的空间。
  6. gaplessPlayback → bool - 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）。
  7. image → ImageProvider - 要显示的图像。
  8. matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。
  9. repeat → ImageRepeat - 未充分容器时，是否重复图片。
  10. height → double - 图像的高度。
  11. width → double - 图像的宽度。

ImageProvider

ImageProvider 是一个抽象类，主要定义了图片数据获取的接口 load() ，从不同的数据源获取图片需要实现不同的 ImageProvider ，如 AssetImage 是实现了从 Asset 中加载图片的 ImageProvider，而 NetworkImage 实现了从网络加载图片的 ImageProvider。

ImageProvider 的实现类：

image-20221214224722914

2、从 asset 中加载图片

第一步：准备图片

image-20221214225030930

第二步：使用图片

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("訾博的学习笔记")),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        child: Center(
          child: Image(image: AssetImage('assets/images/zibo-logo.jpg')),
        ),
      ),
    );
  }
}

第三步：运行结果

image-20221214225234396

不同的 fit 方式代码示例

  Row _localRow(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image.asset(
            'images/base_widgets/star_black.png', fit: BoxFit.none,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.fill,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.cover,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.contain,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.fitHeight,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.fitWidth,
          ),
        ),
        Container(
          width: 30,
          height: 60,
          color: Colors.yellow,
          child: Image(
            image: AssetImage('images/base_widgets/star_black.png'),
            fit: BoxFit.scaleDown,
          ),
        ),
      ],
    );

3、从网络加载图片

第一步：准备一个网络图片地址

https://himg.bdimg.com/sys/portraitn/item/public.1.a535a65d.tJe8MgWmP8zJ456B73Kzfg

第二步：使用图片

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("訾博的学习笔记")),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        child: Center(
          child: Image(image: NetworkImage('https://himg.bdimg.com/sys/portraitn/item/public.1.a535a65d.tJe8MgWmP8zJ456B73Kzfg')),
        ),
      ),
    );
  }
}

第三步：运行结果

image-20221214225733285

带占位图片的网络图片代码示例

  ListView _listview(){
    return ListView(
      padding: const EdgeInsets.all(30),
      children: [
        Text("本地图片"),
        Container(
          height: 150,
          child: _localRow(),
        ),
        Text("网络图片"),
        Image.network('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),
        Text("带占位图的网络图片，成功加载"),
        FadeInImage.assetNetwork(
          placeholder: 'images/base_widgets/star_black.png',
          image: 'http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg',
          fit: BoxFit.fill,
        ),
      ],
    );
  }

4、Image 缓存

Flutter 框架对加载过的图片是有缓存的（内存），关于 Image 的详细内容及原理我们将会在后面进阶部分深入介绍。

二、ICON

1、概述

Flutter 中，可以像Web开发一样使用 iconfont，iconfont 即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。

在字体文件中，每一个字符都对应一个位码，而每一个位码对应一个显示字形，不同的字体就是指字形不同，即字符对应的字形是不同的。而在iconfont中，只是将位码对应的字形做成了图标，所以不同的字符最终就会渲染成不同的图标。

2、与图片相比的优势

在Flutter开发中，iconfont和图片相比有如下优势：

  1. 体积小：可以减小安装包大小。
  2. 矢量的：iconfont都是矢量图标，放大不会影响其清晰度。
  3. 可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
  4. 可以通过TextSpan和文本混用。

3、使用 Material Design 字体图标

Flutter 默认包含了一套 Material Design 的字体图标，在 pubspec.yaml 文件中的配置如下

flutter:
  uses-material-design: true

Material Design 所有图标可以在其官网查看：https://material.io/tools/icons/

我们看一个简单的例子：

String icons = "";
// accessible: 0xe03e
icons += "\uE03e";
// error:  0xe237
icons += " \uE237";
// fingerprint: 0xe287
icons += " \uE287";

Text(
  icons,
  style: TextStyle(
    fontFamily: "MaterialIcons",
    fontSize: 24.0,
    color: Colors.green,
  ),
);

运行效果如图3-15所示：

image-20221214230951163

通过这个示例可以看到，使用图标就像使用文本一样，但是这种方式需要我们提供每个图标的码点，这并对开发者不友好，所以，Flutter封装了 IconData 和 Icon 来专门显示字体图标，上面的例子也可以用如下方式实现：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.accessible,color: Colors.green),
    Icon(Icons.error,color: Colors.green),
    Icon(Icons.fingerprint,color: Colors.green),
  ],
)

Icons 类中包含了所有 Material Design 图标的 IconData 静态变量定义。

4、使用自定义字体图标

我们也可以使用自定义字体图标。iconfont.cn上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式即可。

假设我们项目中需要使用一个书籍图标和微信图标，我们打包下载后导入：

第一步：导入字体图标文件

导入字体图标文件；这一步和导入字体文件相同，假设我们的字体图标文件保存在项目根目录下，路径为"fonts/iconfont.ttf"：

fonts:
  - family: myIcon  #指定一个字体名
    fonts:
      - asset: fonts/iconfont.ttf

第二步：定义一个MyIcons类

class MyIcons{
  // book 图标
  static const IconData book = const IconData(
      0xe614, 
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
  // 微信图标
  static const IconData wechat = const IconData(
      0xec7d,  
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
}

第三步：使用

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(MyIcons.book,color: Colors.purple),
    Icon(MyIcons.wechat,color: Colors.green),
  ],
)

M、扩展阅读

在 Flutter 中使用 iconfont

https://blog.csdn.net/qq_39047922/article/details/120781907

Flutter学习之iconfont的引入

https://www.jianshu.com/p/89b655851ee6

Flutter中的Image入门讲解

http://www.javashuo.com/article/p-bbwliuwz-dt.html

N、参考资料

Flutter Image全解析

http://t.zoukankan.com/jiuyi-p-12616789.html

Flutter 实战

https://book.flutterchina.club/chapter3/img_and_icon.html#_3-3-2-icon

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/90805.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

9.高性能计算 期末复习

9.高性能计算 期末复习

文章目录1.提纲2.第二章 并行硬件&程序设计2.1 SIMD&MIMD2.2 可扩展性2.7 串行程序并行化&#xff08;poster四步&#xff1a;划分、通信、聚合、分配&#xff09;3.mpi2.1 点对点gemm2.2集合通信gemmsend/recv实现reducesend/recv 实现ring AllReduce2.3 加速比2.4 奇…
阅读更多...
数据预处理的方法有哪些？

数据预处理的方法有哪些？

数据处理的工作时间占据了整个数据分析项目的70%以上。因此&#xff0c;数据的质量直接决定了分析模型的准确性。那么&#xff0c;数据预处理的方法有哪些呢&#xff1f;比如数据清洗、数据集成、数据规约、数据变换等&#xff0c;其中最常用到的是数据清洗与数据集成&#xff…
阅读更多...
医学影像篇

医学影像篇

影像组学研究的基本流程知识点 01 准备工作 研究前我们先要做好准备工作&#xff1a;&#xff08;这个准备工作呢就好像小白做菜&#xff09; 最开始&#xff0c;我们往往主动提出或者被提出了一个临床问题&#xff08;临床问题可能是老板直接安排的&#xff0c;也可能是在临…
阅读更多...
【网管日记】Nginx基本介绍、安装与使用

【网管日记】Nginx基本介绍、安装与使用

Nginx基本使用 基本介绍 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器。其特点是 占用内存少&#xff0c;并发能力强 &#xff0c;事实上nginx的并发能力在同类型的网页服务器中表现较好&#xff0c;中国大陆使用ngin…
阅读更多...
AntV-G6：图表自动居中显示/画布自适应/fitView

AntV-G6：图表自动居中显示/画布自适应/fitView

需求描述 图表节点较多时&#xff0c;可能分布到屏幕可视范围之外&#xff0c;期望图表自动居中显示 调研分析 阅读官网文档&#xff1a;G6.Graph配置项&#xff0c;一下就看到了这个配置项&#xff1a; 看起来只要在初始化图表的配置里加上“fitView: true”就能万事大吉了…
阅读更多...
解决PyCharm中opencv不自动补全的问题

解决PyCharm中opencv不自动补全的问题

解决PyCharm中opencv不自动补全的问题前言解决办法前言 今天下载opencv后&#xff0c;发现用pycharm打开并没有出现代码补全的情况&#xff0c;对于我这种新手极其不友好&#xff0c;故我去网上寻找方法。 opencv版本&#xff1a;4.6.0 寻找半天 有的说&#xff0c;要移动cv…
阅读更多...
数据结构——二叉树的顺序存储（堆）

数据结构——二叉树的顺序存储（堆）

二叉树的顺序存储 顺序结构存储就是使用数组来存储&#xff0c;一般使用数组只适合表示完全二叉树&#xff0c;因为不是完全二叉树会有空间的浪费。而现实中使用中只有堆才会使用数组来存储&#xff0c;关于堆我们后面的章节会专门讲解。二叉树顺序存储在物理上是一个数组&…
阅读更多...
玩转MySQL：如何在高并发大流量情况下正确分库分表海量数据

玩转MySQL：如何在高并发大流量情况下正确分库分表海量数据

引言 本篇数据库专栏内容&#xff0c;主要会讲解不同高并发场景下的MySQL架构设计方案&#xff0c;也包括对于各类大流量/大数据该如何优雅的处理&#xff0c;也包括架构调整后带来的后患又该如何解决&#xff1f;其中内容会涵盖库内分表、主从复制、读写分离、双主热备、垂直分…
阅读更多...
极简而高效的沟通管理法（有点长，但都是干货）

极简而高效的沟通管理法（有点长，但都是干货）

我想说的意思不是说为了体现工作的价值&#xff0c;要故意提高工作的沟通成本&#xff0c;相反&#xff0c;我们的确需要通过归纳总结梳理标准话的流程、甚至是工具化的手段来降低一个领域的沟通&#xff0c;但我们同时工作在找更复杂、更需要去沟通的场景中&#xff0c;去创造…
阅读更多...
【PTA-训练day16】L2-028 秀恩爱分得快 + L1-064 估值一亿的AI核心代码

【PTA-训练day16】L2-028 秀恩爱分得快 + L1-064 估值一亿的AI核心代码

&#xff01;L2-028 秀恩爱分得快 - 分块大模拟 PTA | 程序设计类实验辅助教学平台 这个题还是挺考验 函数合理运用 和 数据模拟处理能力 的 思路&#xff1a; 因为可能出现-0这种输入 所以不能是int型 stoi() 将字符串转化为整数先把每张照片的人 按照片编号储存因为题目只要…
阅读更多...
手慢无！阿里云神作被《Spring Boot进阶原理实战》成功扒下，限时

手慢无！阿里云神作被《Spring Boot进阶原理实战》成功扒下，限时

小编又来给大家分享好书了&#xff1a;郑天民老师的 《Spring Boot进阶:原理、实战与面试题分析》&#xff0c;别问网上有没有开源版本&#xff01;问就是我也不知道&#xff0c;哈哈&#xff01;小编会在文末附电子版下载方式。 郑天民是谁&#xff1f; 资深架构师和技术专家…
阅读更多...
非程序员，到底该不该学Python

非程序员，到底该不该学Python

前言 最近被各种Python的小广告轰炸。也有很多非程序员的朋友咨询Python相关的事儿。&#xff08;前两年是前端&#xff09; 所以今天不讲技术&#xff0c;纯BB。 进入正题吧&#xff1a; Python是啥&#xff1a; 编程语言。和大多数编程语言一样。它只能帮助人类完成一些…
阅读更多...
3000字带你读懂：BI能解决报表解决不了的什么问题？

3000字带你读懂：BI能解决报表解决不了的什么问题？

一、BI不等于报表 工作原因&#xff0c;老李经常跟不同行业的人打交道。不聊不知道&#xff0c;在大肆谈论“数字化转型”、“信创”、“业务对象数字化”、“BI”这类大而广的词语之下&#xff0c;隐藏着的却是国人的无知。搞业务的朋友不太懂这类工具和概念&#xff0c;我也…
阅读更多...
mac怎么删除硬盘里面的东西？为什么苹果电脑无法删除移动硬盘文件？

mac怎么删除硬盘里面的东西？为什么苹果电脑无法删除移动硬盘文件？

mac怎么删除硬盘里面的东西&#xff1f;由于移动硬盘的文件系统是NTFS格式的&#xff0c;而这种格式与Mac电脑是不兼容的&#xff0c;Mac电脑没有权限对移动硬盘上的数据进行操作&#xff0c;Mac上不能把移动硬盘的数据删除了&#xff0c;那么&#xff0c;有没有什么操作方法&a…
阅读更多...
状态模式（State）

状态模式（State）

参考&#xff1a; [状态设计模式 (refactoringguru.cn)](https://refactoringguru.cn/design-patterns/mediator) 4. 状态模式 — Graphic Design Patterns (design-patterns.readthedocs.io) design-patterns-cpp/State.cpp at master JakubVojvoda/design-patterns-cpp …
阅读更多...
31-Vue之ECharts-饼图

31-Vue之ECharts-饼图

ECharts-饼图前言饼图的特点饼图的基本实现饼图的常见效果显示数值南丁格尔图选中效果圆环前言 本篇来学习饼图的实现 饼图的特点 饼图可以很好地帮助用户快速了解不同分类的数据的占比情况 饼图的基本实现 ECharts 最基本的代码结构准备数据准备配置项 在 series 下设置 …
阅读更多...
去年今日我凭借这份文档，摇身一变成了被BAT看中的幸运儿

去年今日我凭借这份文档，摇身一变成了被BAT看中的幸运儿

我足够努力&#xff0c;当然也足够幸运。现在把这份文档和这份幸运分享给你们。 JVM 线程 JVM内存区域 JVM运行时内存 垃圾回收与算法 JAVA 四种引用类型 GC分代收集算法 VS 分区收集算法 GC垃圾收集器 JAVA IO/NIO JVM 类加载机制 由于篇幅限制小编&#xff0c;细节内…
阅读更多...
使用Tensorflow2和Pytorch实现线性回归

使用Tensorflow2和Pytorch实现线性回归

使用Tensorflow2和Pytorch实现线性回归步骤Tensorflow2代码效果Pytorch代码效果步骤 准备步骤&#xff1a; 1. 创建数据集 2. 设置超参数 3. 创建模型(函数) 4. 选择损失函数 5. 选择优化器 训练步骤&#xff1a; 6. 通过模型(函数)前向传播 7. 计算损失 8. 对超参数求梯度 9…
阅读更多...
【人脸识别】人脸实时检测与跟踪【含GUI Matlab源码 673期】

【人脸识别】人脸实时检测与跟踪【含GUI Matlab源码 673期】

⛄一、简介 如何在视频流中检测到人脸以及人脸追踪。对象检测和跟踪在许多计算机视觉应用中都很重要&#xff0c;包括活动识别&#xff0c;汽车安全和监视。所以这篇主要总结MATLAB的人脸检测和跟踪。 首先看一下流程。检测人脸——>面部特征提取——>脸部追踪。 ⛄二、…
阅读更多...
springcloud3 EurekaClient集群的搭建2

springcloud3 EurekaClient集群的搭建2

一 概述 1.1 概述 本文主要是搭建集成eurekaserver的几个客户端&#xff0c;即服务提供者&#xff0c;消费者。架构图如下所示 1.2 使用eureka整合的优点 使用Eureka管理注册的好处&#xff1a;消费者直接调用服务名称而不用在关系地址和端口&#xff0c;且该服务还有负载均…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023