Flutter支持稳定的桌面设备开发已经一段时间了,不得不说,Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验,但仍然使用Flutter开发出了一个桌面版小程序,功能很简单,就是对输入的json做格式化处理和转模型。
成都创新互联公司专业为企业提供开州网站建设、开州做网站、开州网站设计、开州网站制作等企业网站建设、网页设计与制作、开州企业网站模板建站服务,十多年开州做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
话不多说,先来看看实际效果。 项目源码地址
开发环境如下:
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作为我们日常开发工作中经常要打交道的一种数据格式,它共有6种数据类型: null , num , string , object , array , bool 。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中,又需要接触到json解析时,就会感觉非常棘手,因为flutter没有反射,导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。
数据量少还能接受,一旦量大,那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具**json_serializable**可以自动生成这块转换代码,也解决了flutter界json转模型的空缺。当然,业界也有专门解析json的网站,可以自动生成dart代码,使用者在生成后复制进项目中即可,也是非常方便的。
本项目以json解析为切入点,和大家一起来看下flutter是如何开发桌面应用的。
要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下,让我们的项目支持 windows 和 macos 系统。
接下来使用 flutter create 命令创建我们的模版工程。
创建完项目后,我们就可以 run 起来了。
先来看下整体界面,界面四块,分别为功能模块、文件选择模块、输入模块、输出模块。
我们在新建一个桌面应用时,默认的模版又一个Appbar,此时应用可以用鼠标拖拽移动,放大缩小,还可以缩到很小。但是,我们一旦去掉这个导航栏,那么窗口就不能用鼠标拖动了,并且我们往往不希望用户将我们的窗口缩放的很小,这会导致页面异常,一些重要信息都展示不全。因此这里需要借助第三方组件 bitsdojo_window 。通过 bitsdojo_window ,我们可以实现窗口的定制化,拖动,最小尺寸,最大尺寸,窗口边框,窗口顶部放大、缩小、关闭的按钮等。
通过 InkWell 组件,可以捕捉到手势、鼠标、触控笔的移动和停留位置
这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框,可以使用 Overlay 。需要注意的是,由于在 Overlay 上的 text 的根结点不是 Material 风格的组件,因此会出现黄色的下划线。因此一定要用 Material 包一下 text 。并且你必须给创建的 OverlayEntry 一个位置,否则它将全屏显示。
读取说表拖拽的文件一开始想尝试使用 InkWell 组件,但是这个组件无法识别拖拽中的鼠标,并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter-2天写个桌面端APP》中发现一个可读取拖拽文件的组件 desktop_drop ,能满足要求。
使用开源组件 file_picker ,选完图片后的操作和拖拽选择图片后的操作一致。
Textfield 如果要显示富文本,那么需要自定义 TextEditingController 。并重写 buildTextSpan 方法。
在做导出功能时遇到下列报错,保存提示为没有权限访问对应目录下的文件。
通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为 com.apple.security.files.downloads.read-write ,表示 对用户的下载文件夹的读/写访问权限 。那么,使用Xcode打开Flutter项目中的mac应用,修改工程目录下的 DebugProfile.entitlements 文件,向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ,并将值设置为YES,保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。
当然,这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将 entitlements 文件的 App Sandbox 设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制,因此这个选项慎用。
原文地址:
如果你要手动操作的话,你可以选择截图,然后发送图片就可以了。
问题场景: 在登录界面获取验证码短信时点击 键盘上方点击快捷输入短信验证码 会输入两次验证码.
解决方案1:
限制输入框输入的长度 ,短信验证几位就限制成几位.
快捷有效.但如果后期更换短信模板位数变化会有影响.
maxLength:[验证码位数]
解决方案2:
判断重复的验证码
定义 TextEditingController
TextEditingController _controller = TextEditingController();
造成原因: ??? 网上说出发了原生 UITextFieldTextDidChangeNotification 的问题导致的.
一、简述
.bash_profile 一般是用户的配置文件,配置一些基础环境变量
比如/root/.bash_profile这个文件就是当root用户 用bash作为登陆shell的时候登陆后会运行这个文件里面的一系列的命令。
用户登录 shell、sh、bash系统会执行此文件,另外当我们使用一个功能其中部分功能是读取bash_profile文件的配置
二、使用
1、open ~/.bash_profile 添加配置
添加我们的一些配置Android和flutter的需要的的url和path
比如:
export PUB_HOSTED_URL=
export FLUTTER_STORAGE_BASE_URL=
export PATH=/Users/zhangxiaomeng02/Desktop/flutter-1.22.5/bin:$PATH
export ANDROID_HOME="/Users/xxx/Library/Android/sdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
2、执行我们的环境变量
source ~/.bash_profile
运行 source $home/.bash_profile 刷新当前终端窗口.
Dart的 IO 库包含了文件读写的相关类,它属于 Dart 语法标准的一部分,所以通过 Dart IO 库,无论是 Dart VM 下的脚本还是 Flutter,都是通过 Dart IO 库来操作文件的,不过和 Dart VM 相比,Flutter 有一个重要差异是文件系统路径不同,这是因为Dart VM 是运行在 PC 或服务器操作系统下,而 Flutter 是运行在移动操作系统中,他们的文件系统会有一些差异。
Android 和 iOS 的应用存储目录不同, PathProvider 插件提供了一种平台透明的方式来访问设备文件系统上的常用位置。该类当前支持访问两个文件系统位置:
File代表一个整体的文件,他有三个构造函数,分别是:
文件读取本身有两种形式,一种是文本,一种是二进制。
2.2.1 读取文本内容
如果是文本文件,File提供了readAsString、readAsLines、readAsStringSync、readAsLinesSync方法,读取文本内容
readAsString 一次性读取所有文本
readAsLines 一行行的读取文本
结果返回的是一个List,list中表示文件每行的内容
readAsStringSync、readAsLinesSync同步读取文本
2.2.2 读取二进制内容
如果文件是二进制,那么可以使用readAsBytes或者同步的方法readAsBytesSync:
dart中表示二进制有一个专门的类型叫做Uint8List,他实际上表示的是一个int的List。
上面提到的读取方式,都是一次性读取整个文件,缺点就是如果文件太大的话,可能造成内存空间的压力。
所以File为我们提供了另外一种读取文件的方法,流的形式来读取文件.
示例
dart提供了open和openSync两个方法来进行随机文件读写:
写入和文件读取一样,可以一次性写入或者获得一个写入句柄,然后再写入。
一次性写入的方法有四种,分别对应字符串和二进制
句柄形式可以调用openWrite方法,返回一个IOSink对象,然后通过这个对象进行写入:
默认情况下写入是会覆盖整个文件的,但是可以通过下面的方式来更改写入模式:
虽然dart中所有的异常都是运行时异常,但是和java一样,要想手动处理文件读写中的异常,则可以使用try,catch:
我们还是以计数器为例,实现在应用退出重启后可以恢复点击次数。 这里,我们使用文件来保存数据:
1.引入PathProvider插件;在pubspec.yaml文件中添加如下声明:
执行 flutter pub get
2.实现如下
参考:
于是就有了写作本文的动力,--------解决同时连接多台蓝牙设备!!!
flutter_blue 适合于单台的蓝牙设备,使用起来简单
flutter_reactive_ble 适合于单台的蓝牙设备,多台蓝牙设备也可以用
flutter_ble_lib 适合于单台的蓝牙设备,多台蓝牙设备也可以用,可以在模拟器上进行调试蓝牙
感觉后2个第三方库都可以使用,本人先入为主使用了flutter_reactive_ble,所以本文以flutter_reactive_ble为基础进行介绍
先声明4个全局变量,后面会用到
开始扫描
如果扫描过程,不使用过滤条件,withServices这个参数可以给个空数组
停止扫描如下
连接设备
断开设备,
每连接成功一个设备后,就会产生一个_connectionStreamSubscription,对应设备的断开,就用对应的StreamSubscription去断开, 可以用一个HashMap,去记录 连接成功的设备 与 StreamSubscription 的对应关系
去扫描服务,并过滤服务,扫描结果服务里面是包含有特征的数组,如: serviceId:[fff0,fff1,fff2,fff3,...]
去监听上报来的数据,参数来自前面扫描到的结果serviceId--服务ID, characteristicId--特征ID,deviceId--设备ID
后面就是各位看官根据自己的需求去做逻辑处理啦。
对设备设置命令,发送请求(写操作),list为整形数据,要写的数据
读取设备的信息(读操作)
flutter 多台蓝牙设备同时连接的分享就到这里喽,小伴们,觉得有点用的话,或者已经看到这里面来的请点个赞吧~~ 后续分享更多有关flutter的文章。如果有疑问的话,请在下方留言~
过一段时间后,我在项目把这个蓝牙库用起来了,基本能满足日常需求.效果如下: