网站建设资讯

NEWS

网站建设资讯

flutter网格等分,fluent网格划分意义

Flutter 可滚动组件 之 GridView (十七)

GridView可以构建一个二维网格列表

创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的富源网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

默认构造函数如下:

我们可以看到,GridView和ListView的大多数参数都是相同的,它们的含义也都相同的。我们唯一需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridView子组件如何排列(layout)。

SliverGridDelegate 是一个抽象类,定义了GridView Layout相关接口,子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个 SliverGridDelegate 的子类 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithFixedCrossAxisCount

该子类实现了一个横轴为固定数量子元素的layout算法,其构造函数为:

可以发现,子元素的大小是通过crossAxisCount和childAspectRatio两个参数共同决定的。注意,这里的子元素指的是子组件的最大显示空间,注意确保子组件的实际大小不要超出子元素的空间。

示例

SliverGridDelegateWithMaxCrossAxisExtent

该子类实现了一个横轴子元素为固定最大长度的layout算法,其构造函数为

maxCrossAxisExtent为子元素在横轴上的最大长度,之所以是“最大”长度,是因为横轴方向每个子元素的长度仍然是等分的,举个例子,如果ViewPort的横轴长度是450,那么当maxCrossAxisExtent的值在区间[450/4,450/3)内的话,子元素最终实际长度都为112.5,而childAspectRatio所指的子元素横轴和主轴的长度比为最终的长度比。其它参数和SliverGridDelegateWithFixedCrossAxisCount相同。

示例

GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount,我们通过它可以快速的创建横轴固定数量子元素的GridView

示例

GridView.extent构造函数内部使用了SliverGridDelegateWithMaxCrossAxisExtent,我们通过它可以快速的创建横轴子元素为固定最大长度的的GridView

示例

上面我们介绍的GridView都需要一个widget数组作为其子元素,这些方式都会提前将所有子widget都构建好,所以只适用于子widget数量比较少时,当子widget比较多时,我们可以通过GridView.builder来动态创建子widget。GridView.builder 必须指定的参数有两个:

示例

假设我们需要从一个异步数据源(如网络)分批获取一些Icon,然后用GridView来展示:

_retrieveIcons():在此方法中我们通过Future.delayed来模拟从异步数据源获取数据,每次获取数据需要200毫秒,获取成功后将新数据添加到_icons,然后调用setState重新构建。

在 itemBuilder 中,如果显示到最后一个时,判断是否需要继续获取数据,然后返回一个Icon。

GridView.builder 源码定义如下:

它主要要传两个参数 gridDelegate 和 childrenDelegate ,gridDelegate是SliverGridDelegate类型,SliverGridDelegate它有两个子类,就是我们上文中说的 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent ,childrenDelegate 是SliverChildDelegate类型,SliverChildDelegate也有两个子类 SliverChildBuilderDelegate 和 SliverChildListDelegate ,一个是通过Builder创建Item,一个是指定所有item。和ListView 很类似

示例

补充知识点:

GridView中的Sliver是SliverGrid

ListView 和 GridView 都是继承于BoxScrollView,BoxScrollView中存在一个抽象方法buildChildLayout,这个buildChildLayout方法是在提供Sliver,GridView中关于buildChildLayout实现如下:

Flutter了解之可滑动组件

Flutter官方并没有对Widget进行官方分类,对其分类主要是为了对Widget进行功能区分。

当组件内容超过当前显示窗口时,如果没有特殊处理,Flutter则会提示Overflow错误。为此,Flutter提供了多种可滚动组件用于显示列表和长布局。

在可滚动组件的坐标描述中,通常将滚动方向称为主轴,非滚动方向称为纵轴。由于可滚动组件的默认方向一般都是沿垂直方向,所以默认情况下主轴就是指垂直方向,水平方向同理。

通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大;如果要一次性将子组件全部构建出将会非常昂贵!为此,Flutter中提出一个Sliver(中文为“薄片”的意思)概念,如果一个可滚动组件支持Sliver模型,那么该滚动可以将子组件分成好多个“薄片”(Sliver),只有当Sliver出现在视口中时才会去构建它,这种模型也称为“基于Sliver的延迟构建模型”。

可滚动组件中有很多都支持基于Sliver的延迟构建模型,如ListView、GridView,但是也有不支持该模型的,如SingleChildScrollView。

在很多布局系统中都有ViewPort的概念,在Flutter中,术语ViewPort(视口),如无特别说明,则是指一个Widget的实际显示区域。例如: 一个ListView的显示区域高度是800像素,虽然其列表项总高度可能远远超过800像素,但是其ViewPort仍然是800像素。

可滚动组件都直接或间接包含一个Scrollable组件

如果要给可滚动组件添加滚动条,只需将Scrollbar作为可滚动组件的任意一个父级组件。

沿一个方向线性排布所有子组件。支持基于Sliver的延迟构建模型。

ListView高度边界无法确定时会异常。

默认构造函数有一个children参数,它接受一个Widget列表。

实际上通过此方式创建的ListView和使用SingleChildScrollView+Column的方式没有本质的区别。

适合只有少量的子组件的情况,因为这种方式需要将所有children都提前创建好(这需要做大量工作),而不是等到子widget真正显示的时候再创建,也就是说通过默认构造函数构建的ListView没有应用基于Sliver的懒加载模型。

例(水平滚动)

适合列表项比较多(或者无限)的情况,因为只有当子组件真正显示的时候才会被创建,也就说通过该构造函数创建的ListView是支持基于Sliver的懒加载模型的。

例(不同类型的item)

ListView.separated可以在生成的列表项之间添加一个分割组件,它比ListView.builder多了一个separatorBuilder参数,该参数是一个分割组件生成器。

类似于Android中的ScrollView,它只能接收一个子组件。

通常内容不会超过屏幕太多时使用SingleChildScrollView,这是因为它不支持基于Sliver的延迟实例化模型,所以如果预计视口可能包含超出屏幕尺寸太多的内容时,那么使用SingleChildScrollView将会非常昂贵(性能差),此时应该使用一些支持Sliver延迟加载的可滚动组件,如ListView。

例(将大写字母A-Z沿垂直方向显示)

一个二维网格列表

GridView和ListView的大多数参数都是相同的。

横轴为固定数量子元素。

GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount。

例(GridView.count)

该子类实现了一个横轴子元素为固定最大长度的layout算法

当子widget比较多时,可以通过GridView.builder来动态创建子widget。

GridView.builder 必须指定的参数有两个,其中itemBuilder为子widget构建器。

举个例子,假设有一个页面,顶部需要一个GridView,底部需要一个ListView,而要求整个页面的滑动效果是统一的,即它们看起来是一个整体。如果使用GridView+ListView来实现的话,就不能保证一致的滑动效果,因为它们的滚动效果是分离的。

所以这时就需要一个"胶水",把这些彼此独立的可滚动组件"粘"起来,而CustomScrollView的功能就相当于“胶水”。

Sliver有细片、薄片之意,在Flutter中Sliver通常指可滚动组件子元素。在CustomScrollView中,需要粘起来的可滚动组件就是CustomScrollView的Sliver了,如果直接将ListView、GridView作为CustomScrollView是不行的,因为它们本身是可滚动组件而并不是Sliver。

因此,为了能让可滚动组件能和CustomScrollView配合使用,Flutter提供了一些可滚动组件的Sliver版,如SliverList、SliverGrid等。

实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型(自身不能再滚动),而后者包含滚动模型 ,也正因如此,CustomScrollView才可以将多个Sliver"粘"在一起,这些Sliver共用CustomScrollView的Scrollable,所以最终才实现了统一的滑动效果。

例(SliverList)

例(SliverGrid)

可以用ScrollController来控制可滚动组件的滚动位置

滚动位置恢复

ScrollPosition

ScrollController控制原理

滚动监听

Flutter快速上手10:高级布局之网格 GridView

用于创建二维网格列表。

GridView.count 是在交叉轴上创建固定个数的网格,crossAxisCount为必须的属性,表示交叉轴网格的个数,而GridView.extent是在交叉轴上创建最大可容纳的网格,maxCrossAxisExtent是必须的属性,表示交叉轴上网格的最大的宽度。

本地Flutter 2.10.1,Mac版Android Studio Bumblebee | 2021.1.1 Patch 2

我是小栗子,初学Flutter ,文章会根据学习进度不定时更新,请多多指教~~

【百度地图篇】1.Flutter+百度Sdk实现地图功能 & 百度地图显示网格问题

我是初学者小白,所以很多看法不深,理解也不够透彻。但是很适合小白们一起从低角度往高处探索。文中有错误的,感谢指正,一起进步。

趁着假期做一个Flutter的地图功能,因为后端选用了百度地图,所以前端没得挑。找了遍插件,并没有现成可用的。(不过发现了百度官方也自开发Flutter插件,目前功能只有一个获取本地位置信息,后期会继续增加吧?很期待!)

参考帖子:

这个实际上跟功能之间没太大关系,只是我按照个人摸索的过程来写。

当对一个“领域/知识块”完全不懂的时候,360°的方向都不确定的话。先了解基础概念,有利于你确定自己的摸索方向。

参考帖子:

中间我跳过了几十,上百个帖子的摸索过程。这个才是关键能够真正做事的参考。

因为百度的sdk还算是很完善的,所以一旦出问题,都会有对应的报错提示。

我是使用flutter插件:permission_handler,来解决安卓的动态授权问题,用法简单而且设计合理。

这个错误直接来看,就是签名有问题。怎么查看SHA1码和包名,这里不多说,网上有极其多的方法,百度Sdk开发指南里也有。没那么复杂,也没那么麻烦。按照流程操作就是对的。

实在不放心?跟我一样,flutter打包后,把apk反过来解SHA1码不就行了?

参考帖子:

红色框框基本就是帖子讲解的那样。

蓝色框框见下图:release标签里好像是自己设置了。所以debug标签里面,箭头指向的位置,是我多设置的一个参数。

uid: -1 appid -1 msg: httpsPost failed,IOException:Unable to resolve host "api.map.baidu.com": No address associated with hostname

这一步我是哭笑不得,一开始老是和问题(2)混淆,导致浪费很多时间。仔细阅读后,发现是不能连接到“api.map.baidu.com”。

我打开模拟器的chrome浏览器,发现不能上网。查看手机的dns是10.0.2.3(默认的),和家里wifi不一样,所以不能上网也正常,之前居然没发现这个问题!!!

终端执行:adb shell  和  getprop,就可以查看所有的属性参数了。(window小伙伴自行百度,这个没多大差别。如果你有多个设备,记得自己选好设备。)

在里面找到这一项,就是你的dns参数。有些人是net.dns1,我的是net.eth0.dns1。这个没关系,只是等下指令 稍微改动 就行。

修改dns指令:setprop net.eth0.dns1 192.168.2.1

后面的192.168.2.1是我自己的dns,这个根据自己的情况来填写。不懂的百度下怎么查看自己的dns。

虽然提示设置失败,但是回到模拟器一看,地图已经显示出来了。

嘿嘿,在flutter设定多大的区域,地图就是多大的区域。用起来就很方便了。

过程十分痛苦,因为对flutter不是很熟悉,对Android原生更是了解很少。所以自己就像突然不能讲话,被丢到一个陌生的环境,却要我去找一个人。所以细心很重要,一定要看清楚错误提示,不要错过每一个细节和可能性。

幸好最后解决了问题,开心~

其实如果你仔细阅读过百度官方的文档,会发现里面有关于 地图的生命周期管理 。然后在这里面没有提及到,这一点虽然没提,但不可或缺,小伙伴就自行思考吧。

最后还有一点,其实我的初衷是想实现一个百度地图的plugin,但是苦于能力有限,对Android的不熟悉,最后折戟。我不得已另起项目,然后重新实现地图sdk接入。经过这次对于这些有更多更全面的认知后,有空会再次研究flutter 插件的开发,共勉,奥利给!!!

flutter中流式布局

流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。栅栏系统(网格系统),用户标签等。在Flutter中主要有Wrap和Flow两种Widget实现。

在介绍Row和Colum时,如果子widget超出屏幕范围,则会报溢出错误,在Flutter中通过Wrap和Flow来支持流式布局,溢出部分则会自动折行。

上述有很多属性和Row的相同,其意义其实也是相同的,这里我就不一一介绍了,主要介绍下不同的属性:

我们一般很少会使用Flow,因为其过于复杂,需要自己实现子widget的位置转换,在很多场景下首先要考虑的是Wrap是否满足需求。Flow主要用于一些需要自定义布局策略或性能要求较高(如动画中)的场景。Flow有如下优点:

我们对六个色块进行自定义流式布局:

实现TestFlowDelegate:

可以看到我们主要的任务就是实现paintChildren,它的主要任务是确定每个子widget位置。由于Flow不能自适应子widget的大小,我们通过在getSize返回一个固定大小来指定Flow的大小,实现起来还是比较麻烦的。


网站标题:flutter网格等分,fluent网格划分意义
文章地址:http://cdweb.net/article/dsceoii.html