快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

flutter全局key,flutter应用

Flutter 全局List Widget 不刷新问题

我是在StatefulWidget里面设置了一个全局的List,然后动态改变List里面的内容,然后使用setState刷新,结果发现没有用,点击一下虽然会多出一个新的Item,但是还是原来那个,就是List长度、内容不同,Widget显示的是同一个Widget。

我们提供的服务有:成都网站建设、成都做网站、微信公众号开发、网站优化、网站认证、贵港ssl等。为上千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的贵港网站制作公司

比如:九宫格添加图片,第一个是添加图片,点击添加图片把图片放到List里面,然后setState刷新,结果发现页面没变化,触碰添加图片Item,就会多出一个添加图片Item。

根据Flutter基于不可变数据的原理,我们直接把List换一个引用,创建一个新的List。

getx的controller是怎么销毁的

getx可以做到通过页面的退出自动控制controller的销毁,那么他是怎么做到的呢

当我们使用getx的路由套件时,可以看到,他的每个跳转方法都使用了自定义的 GetPageRoute 。

在 GetPageRoute 中对于此次的问题,我们需要关注的是两个方法

嗯,这里给传了一个 reference 给了 Get.reference ,这个 reference 看一下是什么玩意。。

dispose ,route退出流程里调用的方法。在这里面Get做了两件事,我们主要关注第一件事, removeDependencyByRoute() 参数是上面的页面标识。

这个方法里,我们可以看到调用了 GetInstance 的 delete 方法,这个方法就是销毁controller的方法,但是为什么呢?为啥传一个页面标识就能删除到对应的controller呢。我们接着看

我们都知道我们在使用getx的controller时,一定会有两个操作,一个是 Get.put() ,一个是 Get.find() 让我们一个一个的看一下

Get.put 的本质其实是将我们传入的实例,根据类 S 和 tag 创建一个 key ,然后以key和实例作为键值对存入了全局的map中(此处是简单理解,看也看得出来不是直接传实例了)

Get.find 方法很简单的只是通过类 S 和 tag 去全局map中找一个实例返回出去, 但是 返回之前,还做了一步操作,即 _initDependencies 。

看到没,就在下面Get.reference,之前在GetPageRoute的页面构建之前赋值了最近的页面,然后在此处用来做routesKey的value和前面的controller的key值进行绑定。

这也是得益于flutter是个单线程模型,才能这样无脑的通过这种方式传值。其实getx中有不少让人觉得神奇的地方都是利用了单线程的优势,比如Obx的自动刷新,也是在Obx的build方法和Rx的value的get方法之间通过一个全局指针来进行传值。

Widget总结

Flutter中Widget,State和BuildContext的概念是每个Flutter开发人员需要完全理解的最重要概念之一。这里先讲解一下Widget以及Widget。三者之间的关系会在最后一篇总结一下。

Widget类在Flutter中是非常重要的,继承自Widget类的有PreferredSizeWidget、ProxyWidget、RenderObjectWidget、StatefulWidget、StatelessWidget。我们日常使用的绝大部分widget都是继承自Widget类,查看Widget类源码,内部实现非常简单,构造函数如下:

在flutter中构建APP是由widget树构建起来的,所以这个key的作用是用来控制在widget树中替换widget的时候使用的。其中Key类是Widget、Element以及SemanticsNode的唯一标识符,继承自Key的还有LocalKey以及GlobalKey。详细可以去framework.dart文件查看相关源码及说明。

在Flutter中,我们平时自定义的widget,一般都是继承自StatefulWidget或StatelessWidget(并不是只有这两种),这两种widget也是目前最常用的两种。如果一个控件自身状态不会去改变,创建了就直接显示,不会有色值、大小或者其他属性的变化,这种widget一般都是继承自StatelessWidget,常见的有Container、ScrollView等。如果一个控件需要动态的去改变或者相应一些状态,例如点击态、色值、内容区域等,那么一般都是继承自StatefulWidget,常见的有CheckBox、AppBar、TabBar等。两者的差别在于是否有状态。

对于StatelessWidget,build方法会在如下三种情况下调用:

我们在创建State的时候可以看到和StatefulWidget相似的build方法,也就是说我们也可以获得一个BuildContext,在使用StatefulWidget.createState创建它们之前以及在调用initState之前,框架将State对象与BuildContext关联起来,该关联是永久的:State对象永远不会改变它的BuildContext(但是BuildContext本身可以在控件树中移动)。后面讲解一下这个BuildContext对象在整个程序中什么角色

State的作用有两点:

State的生命周期有四种状态:

完整生命周期如下:

当控件的配置被更改时会调用State.didUpdateWidget方法,此时框架会重新绘制控件。你也可以使用State.setState方法在状态发生变化时通知框架,告诉框架该对象的内部状态已经改变,框架接到通知后也会重新绘制控件。

State中比较重要的一个方法是setState,当修改状态时,widget会被更新。比方说点击CheckBox,会出现选中和非选中状态之间的切换,就是通过修改状态来达到的。查看setState源码,在一些异常的情况下将会抛出异常:

markNeedsBuild内部,则是通过标记element为diry,在下一帧的时候重建(rebuild)。可以看出setState并不是立即生效,它只是将widget进行了标记,真正的rebuild操作,则是等到下一帧的时候才会去进行。

StatefulWidget的两个主要类别:

在我的小部件的生命周期中,我是否需要考虑一个将要更改的变量,何时更改,将强制重建小部件?

如果问题的答案是肯定的,那么您需要一个有状态的小部件,否则,您需要一个无状态小部件。

比如:

Flutter 94: 初识 MediaQuery

当我们同时为手机和平板适配编写 app 针对不同屏幕尺寸进行 UI 布局或当用户偏好设置较大字号或是想要最大限度等减少动画等;此时就需要 MediaQuery 来帮我们获取所用设备的信息以及用户设置的偏好信息;

MediaQuery 一直存在于 WidgetsApp 和 MaterialApp 中, MediaQuery 继承自 InheritedWidget 是一个单独的 Widget ,但一般通过 MediaQuery.of(context) 来获取相关信息;

当相关信息发生变化,例如屏幕旋转等时,屏幕中 Widget 会重新构建,以保持最新状态;我们可以通过 MediaQuery 构造函数和提供的静态方法手动设置对应的相关信息;

MediaQueryData 包含关于媒介的相关信息;一般通过 MediaQuery.of(context) 获取;

size 为媒介的尺寸大小,以逻辑像素为单位;

devicePixelRatio 为像素密度;与设备物理像素有关,与横竖屏等无关;

orientation 为横竖屏, Orientation.landscape 为横屏, Orientation.portrait 为竖屏;

textScaleFactor 为

每个逻辑像素的字体像素数,小菜理解为字体的像素比;注意,小菜设置了默认字体像素密度为标准的 1.2 倍之后调整设备系统字号,其 1.2 倍依旧是以标准字号为基础扩大 1.2 倍;

platformBrightness 为当前设备的亮度模式;注意调整屏幕亮度并不会改变该模式,与当前系统支持的黑暗模式和明亮模式相关;

alwaysUse24HourFormat 为当前设备是否为 24 小时制;

accessibleNavigation 为是否使用 TalkBack 或 VoiceOver 之类的辅助功能与应用程序进行交互,用以辅助视力障碍人群;

invertColors 为是否使用颜色反转,主要用于 iOS 设备;

highContrast 为用户是否要求前景与背景之间的对比度高,主要用于 iOS 设备;

disableAnimations 为平台是否要求禁用或减少动画;

boldText 为平台是否要求使用粗体;

padding 为屏幕内边距,一般是刘海儿屏或异形屏中被系统遮挡部分边距;

viewInsets 为键盘弹出时等遮挡屏幕边距,其中 viewInsets.bottom 为键盘高度;

systemGestureInsets 为手势边距,如 Android Q 之后添加的向左滑动关闭页面等;

viewPadding 小菜理解为视图内边距,为屏幕被刘海儿屏或异形屏中被系统遮挡部分,从 MediaQuery 边界的边缘计算;此值是保持不变;例如,屏幕底部的软件键盘可能会覆盖并占用需要底部填充的相同区域,因此不会影响此值;

physicalDepth 为设备物理层级,小菜暂时还未想到对应的应用场景;

小菜在尝试获取其他子 Widget Size 时,有两点需要注意,首先要设置一个全局的 GlobalKey 来获取当前位置, key 需要为唯一的;第二通过 GlobalKey().currentContext 获取 BuildContext 上下文环境,从而获取对应尺寸;

MediaQuery 案例尝试

小菜对于部分 MediaQueryData 的应用和理解还不够深入;如有错误请多多指导!

Flutter真香,我用它写了个桌面版JSON解析工具

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。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制,因此这个选项慎用。

原文地址:


新闻标题:flutter全局key,flutter应用
文章分享:http://6mz.cn/article/dscohso.html

其他资讯