第二百九十三回

文章目录

  • 1. 概念介绍
  • 2. 方法与细节
    • 2.1 实现方法
    • 2.2 具体细节
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了"如何混合选择多个图片和视频文件"相关的内容,本章回中将介绍如何通过相机获取图片文件.闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在前面章回中介绍的选择图片或者视频文件的方式都是通过文件窗口进行的,本章回中将介绍如何通过相机获取图片文件,也就是说我们不再选择已经已经拍好的图片,
而是在选择图片时直接使用相机拍一张新图片。

2. 方法与细节

通过相机获取图片也是通过image_picke包来实现,这个包虽然叫image_picker,但是它可以选择视频,而且可以调用相机去拍照和录像。

2.1 实现方法

该包提供了pickImage()方法来从相机获取图片文件,接下来我们介绍详细的实现方法。

  • 创建文件选择器对象,也就是包中提供的ImagePicker类的实例;
  • 使用文件选择器的pickImage()方法获取图片文件,通过该方法的参数把图片源设置为相机;
  • 该方法会启动相机来拍照并且把拍照后图片的存储路径返回给方法调用者;
  • 获取到文件路径后就可以使用Image组件的file()方法加载图片文件。

2.2 具体细节

上面的步骤中使用了ImagePicker的pickImage()方法,该方法返回的是Future<XFile?>类型的对象,因此我们需要通过Future的then方法来获取文件路径。
此外,该方法需要异步运行,因为获取文件路径是比较耗时的操作。方法中的source参数用来控制图片源,包中一共支持两种图片源:gallery和camera。它们分别表
示通过相册和相机来获取图片。该方法还有一个命名参数:CameraDevice,该参数用来控制拍照时使用前置相机还是后置相机。

3. 示例代码

ImagePicker imagePicker = ImagePicker();XFile? _mediaFile;double imgWidth = 200;
double imgHeight = 400;///注意获取图片需要异步操作
Future<XFile?> getImageFileByCamera() async {var imgFile = await imagePicker.pickImage(source: ImageSource.camera,maxWidth: imgWidth,maxHeight: imgHeight,imageQuality: 10,);return imgFile;
}///通过按钮来发出指令
ElevatedButton(onPressed: () {getImageFileByCamera().then((value) {///因为是异步,所以需要通过setState更新数据源setState(() {///返回的路径是app下的缓冲目录:data/user/0/packagename/cache/scaled_1000000010.jpg// debugPrint("path: v${value[0].path}");_mediaFile = value;});});},child: const Text("Load Image"),
),///显示图片文件
_mediaFile == null? const Icon(Icons.image): (_mediaFile!.path.isEmpty? const Text("do not select image"): Image.file(File(_mediaFile!.path),width: imgWidth,height: imgHeight,errorBuilder: (context, error, trace) {return Text("load image error: $error");},))

上面的示例代码中演示了如何通过相机获取图片文件,代码把pickImage()方法封装成了异步方法,并且将它绑定到按钮上,这样就可以在点击按钮时发出获取文件的指
令,此时会打开相机,我们可以使用相机拍照,拍照完后有确认和放弃所拍图片的图标:对号和和错号。这种操作以可视化操作的方式选择图片文件,十分方便。代码中加
载图片前需要检查文件路径,文件路径在程序最开始运行时为null,在程序运行后,但是没有选择任何图片文件时的文件路径不为空,而是为empty,这点需要特别注意,
不然无法正确显示图片文件。此外,我们获取到的图片文件路径是一个相对路径,它并不是图片文件的绝对路径。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • Flutter官方提供了image_picker包,该包以可视化操作的方式获取文件路径;
  • 使用包中的pickImage()方法可以通过相机拍照来获取图片文件的相对路径;
  • 包中的pickImage()方法提供了相关的参数来设置图片来源和前后相机;
  • 加载图片文件前需要检查文件路径的可靠性,不然可能导致Image组件无法加载图片文件;
    看官们,与"如何通过相机获取图片文件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习之遗传算法(Genetic Algorithm)

机器学习(Machine Learning)是一种通过使用算法和统计模型,使计算机系统能够从数据中学习并改善性能的领域。而遗传算法(Genetic Algorithm)是一种受到自然选择和遗传学原理启发的优化算法,用于寻找问题的最优解或近似最优解。 遗传算法的基本思想是通过模拟自然选择和遗…

C++ 指针,数组与指针之间的关系以及指针运算

文章目录 C 指针C 中使用指针 C Null 指针数组与指针sizeof在数组和指针的上的区别&intArr 和 &intArr[0]的类型 C 指针的算术运算递增一个指针递减一个指针指针的比较 引用 VS 指针C 把引用作为参数C 把引用作为返回值 指针的释放 C 指针 学习 C 的指针既简单又有趣。…

C++ easyX小程序(介绍几个函数的使用)

本小程序通过代码和注释&#xff0c;介绍了easyX窗口及控制台窗口的设置方法&#xff1b;还介绍了easyX中关于颜色、线型、画圆、画方、显示文字以及鼠标消息处理等函数的使用方法。为便于理解&#xff0c;本程序同时使用控制台和easyX窗口&#xff0c;由控制台控制程序运行、由…

SpringBoot常见错误

SpringBoot常见错误 1、SpringBoot启动时报错 错误: 找不到或无法加载主类 com.xxx.xxx.Application springboot启动时报错错误&#xff1a;找不到或无法加载主类 com.xxx.xxx.Application。 解决方法就是打开idea的控制台&#xff0c;输入以下三行命令&#xff1a; mvn cl…

nginx安装ssl模块http_ssl_module

查看nginx安装的模块 /usr/local/nginx/sbin/nginx -V若出现“–with-http_ssl_module”说明已经安装过&#xff0c;否则继续执行下列步骤 进入nginx源文件目录 cd /usr/local/nginx/nginx-1.20.2重新编译nginx ./configure --with-http_ssl_module如果组件linux缺少&…

综合案例 - 商品列表

文章目录 需求说明1.my-tag组件封装&#xff08;完成初始化&#xff09;2.may-tag封装&#xff08;控制显示隐藏&#xff09;3.my-tag组件封装&#xff08;v-model处理&#xff1a;信息修改&#xff09;4.my-table组件封装&#xff08;整个表格&#xff09;①数据不能写死&…

《HTML 简易速速上手小册》第3章:HTML 的列表与表格(2024 最新版)

文章目录 3.1 创建无序和有序列表&#xff08;&#x1f4dd;&#x1f31f;&#x1f44d; 信息的时尚搭配师&#xff09;3.1.1 基础示例&#xff1a;创建一个简单的购物清单3.1.2 案例扩展一&#xff1a;创建一个旅行计划清单3.1.3 案例扩展二&#xff1a;创建一个混合列表 3.2 …

uniapp报错:export { render, staticRenderFns, recyclableRender, components }

uniapp vue2项目启动报错 export { render, staticRenderFns, recyclableRender, components }解决办法: 降低prettier的版本 "prettier": "^3.2.4","prettier": "2.8.8",参考 SyntaxError: /xxxx.vue: Unexpected token, expected…

【数据分享】1929-2023年全球站点的逐年平均气温数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;其中又以气温指标最为常用&#xff01;说到气温数据&#xff0c;最详细的气温数据是具体到气象监测站点的气温数据&#xff01;本次我们为大家带来的就是具体到气象监…

win11 系统 WSL2 备份与还原

win11 系统想要使用 linu 开发环境&#xff0c;除了虚拟机&#xff0c;就是 wsl 好使了。 但是 wsl 如过用了一段时间里面环境工程配置迁移麻烦如果重装系统后能直接备份还原就方便了。 确定你的版本 使用 WinR 打开输入框 输入 cmd 命令 打开命令提示符界面 wsl -l -v查看…

com.sun.jna.platform.mac.SystemB$Timeval

错误信息 Exception in thread "main" java.lang.NoClassDefFoundError: com/sun/jna/platform/mac/SystemB$Timevalat java.lang.ClassLoader.defineClass1(Native Method)at java.lang.ClassLoader.defineClass(ClassLoader.java:757)at java.security.SecureClas…

C++笔记(六)

加号运算符重载&#xff1a; 成员函数重载 person operator(person& p) { person temp; temp.m_a this->m_a p.m_a; temp.m_b this->m_b p.m_b; return temp; } 全局函数重载 Person operator(Person& p1, Person& p2) { Person temp; temp.m_A p1.m_A…

GeoHash编码在日志数据处理中的应用与优化

目录 需求说明 GeoHash编码 GeoHash编码介绍 GeoHash编码的基本原理 GeoHash的UDF函数

秀!巧用Python实现对单个文件或多个文件中的指定字符串进行批量(修改)替换

目录 1. 对单份文件 1.1 将替换后的内容保存到新文件中 1.2 直接替换当前文件中的字符 2. 对多份文件&#xff08;支持递归子目录&#xff09; 1. 对单份文件 示例&#xff1a;将文件中字符串“address”替换成“device.address” 1.1 将替换后的内容保存到新文件中 实现…

【备战蓝桥杯】——循环结构

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-bFHV3Dz5xMe6d3NB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

QT tcp与udp网络通信以及定时器的使用 (7)

QT tcp与udp网络通信以及定时器的使用 文章目录 QT tcp与udp网络通信以及定时器的使用1、QT网络与通信简单介绍2、QT TCP通信1、 服务器的流程2、 客户端的流程3、服务器的编写4、客户端的编写 3、QT UDP通信1、客户端流程2、客户端编写3、UDP广播4、UDP组播 4、定时器的用法1、…

【ArcGIS微课1000例】0098:查询河流流经过的格网

本实验讲述,ArcGIS中查询河流流经过的格网,如黄河流经过的格网、县城、乡镇、省份等。 文章目录 一、加载数据二、空间查询三、结果导出四、注意事项一、加载数据 加载实验配套数据0098.rar中的河流(黄河)和格网数据,如下图所示: 接下来,将查询河流流经过的格网有哪些并…

thinter聊天小工具

# 服务端 import queue import re import socket import time import tkinter as tk from threading import Threadclass ChatService():def __init__(self):# 聊天框左上角名称self.title f"马里奇聊天室"self.tk tk.Tk(classNameself.title)# 隐藏窗口# self.tk.…

社区检测(Community Detection)

如果你想进行社区检测&#xff08;Community Detection&#xff09;&#xff0c;你可以使用 NetworkX 库提供的一些算法。社区检测的目标是将图中的节点划分为若干个社区或群组&#xff0c;使得社区内的节点紧密相连而社区间的连接尽量稀疏。以下是一个使用 Louvain 方法进行社…

SpringBoot将第三方的jar中的bean对象自动注入到ioc容器中

新建一个模块&#xff0c;做自动配置 config&#xff1a;需要准备两个类&#xff0c;一个自动配置类&#xff0c;一个配置类 CommonAutoConfig&#xff1a;此类用于做自动配置类它会去读取resoutces下的META-INF.spring下的org.springframework.boot.autoconfigure.AutoConfig…