flutter gridview（Flutter 手势指纹解锁）

本文目录

• Flutter 手势指纹解锁
• Flutter PageView组件怎样让子组件不会重复加载
• Flutter 设置Container高度自适应GridView 或Listview
• flutter 使用ListView等列表组件错误记录
• Flutter 之 滚动监听及控制（十九）
• flutter 在 GridView 中 Text 控件第二行文字显示不全怎么解决

Flutter 手势指纹解锁

  在最近做的一个Flutter项目中，需要用到手势、指纹解锁，这种需求在原生应用中非常常见，但Flutter中手势密码解锁现有库比较少、官方也仅提供有一个 local_auth 指纹库，所以就自己写了个手势库。

  其实实现这个自定义的手势控件有很多思路，首先想到的是，要在View中创建9个圆，那么使用GridView再合适不过了，但是经过尝试，放弃了，这会使交互跟逻辑变的更加复杂，所以还是选择直接继承Widget，自己处理逻辑与手势，那么下面就是需要处理的逻辑:

由于官方插件库已经提供有 local_auth 库，在这里就不大赘述，具体使用就参考Flutter官方local_auth插件库。

  如果在使用过程遇到问题，欢迎下方留言交流。

   Pub 库地址

Flutter PageView组件怎样让子组件不会重复加载

在做一个美女相册flutter demo app的时候发现，每次切换页面的时候，里面的子页面（GridView widget）每次都会重新加载，就像下面这样：

这样的体验肯定不行。经过一番调研后发现竟然还需要做蛮多事情的。

先看看目前的实现：

这个就是包含在PageView里面的子组件，很简单，通过FutureBuilder调一个接口返回数据后build一个GridView。很显然每次切换Tab的时候，应该是每次都进入了_BeautyListWidgetState的build方法，导致每次都会重新刷新。那要怎样才能做到加载后切换不再刷新呢？

需要实现 wantKeepAlive 方法（返回true），另外在build方法最前面需要 调用 super.build(context); ，如下：

所以你需要在initState方法中创建这个Future。如下：

好了。效果实现了。不过稍后还需要看看AutomaticKeepAliveClientMixin源码，看看它是如何做到的。

***隐藏网址***

Flutter 设置Container高度自适应GridView 或Listview

在做移动端的时候, 很多时候会需要下图所示的需求,如图 自己所示：

先进行需求分析, 这个模块可以设计成Container包含GridView,  GridView中子内容个数由后台数据控制, 但是在直接写Container包含GridView控件时会出现 "Failed assertion: line 1920 pos 12: ’hasSize’" 有关的错误, 如果直接给Container一个高度的话, 又不满足我们的需求.

我们想要的结果是由数据控制GridView的个数, 而Container大小跟随GridView个数的变化而变化, 而不去直接设置Container的大小, 

因此,我们点开GridView的api发现, 有一个shrinkWrap属性,  设置shrinkWrap:true即可, 运行一下即可达到效果, 但是又会发现另一个问题, 虽然Container大小可以自适应了, 但是里面的内容又会在局部进行滚动, 而我们的想法是想让内容在整个屏幕中滚动, 并没有局部滚动的效果, 因此, 我们设置另一个属性physics: NeverScrollableScrollPhysics()

在GridView.builder中添加

Container跟随GridView内容变化高度： shrinkWrap:true,    

取消滚动效果： physics:NeverScrollableScrollPhysics(),

flutter 使用ListView等列表组件错误记录

错误1：Vertical viewport was given unbounded height.

设置   shrinkWrap   = true

  ListView  或  GridView  时发现有两个属性。

shrinkWrap  常用于内容大小不确定情况，如果滚动视图( ListView/GridView/ScrollView  等)没有收缩包装，则滚动视图将扩展到允许的最大大小。如果是无界约束，则  shrinkWrap  必须为  true 。

primary  如果为  true ，即使滚动视图没有足够的内容来支撑滚动，滚动视图也是可滚动的。否则，默认为  false  情况下，只有具有足够内容的用户才能滚动视图。

Flutter 之 滚动监听及控制（十九）

ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。

ScrollController构造函数如下：

ScrollController常用的属性和方法：

ScrollController间接继承自Listenable，我们可以根据ScrollController来监听滚动事件，如：

示例
我们创建一个ListView，当滚动位置发生变化时，我们先打印出当前滚动位置，然后判断当前位置是否超过1000像素，如果超过则在屏幕右下角显示一个“返回顶部”的按钮，该按钮点击后可以使ListView恢复到初始位置；如果没有超过1000像素，则隐藏“返回顶部”按钮。

ScrollPosition是用来保存可滚动组件的滚动位置的。一个ScrollController对象可以同时被多个可滚动组件使用，ScrollController会为每一个可滚动组件创建一个ScrollPosition对象，这些ScrollPosition保存在ScrollController的positions属性中（List《ScrollPosition》）。ScrollPosition是真正保存滑动位置信息的对象，offset只是一个便捷属性

一个 ScrollController 虽然可以对应多个可滚动组件，但是有一些操作，如读取滚动位置 offset ，则需要一对一！但是我们仍然可以在一对多的情况下，通过其它方法读取滚动位置，举个例子，假设一个 ScrollController 同时被两个可滚动组件使用，那么我们可以通过如下方式分别读取他们的滚动位置：

我们可以通过 controller.positions.length 来确定 controller 被几个可滚动组件使用。

ScrollPosition 有两个常用方法： animateTo() 和 jumpTo() ，它们是真正来控制跳转滚动位置的方法， ScrollController 的这两个同名方法，内部最终都会调用 ScrollPosition 的。

我们来介绍一下 ScrollController 的另外三个方法：

当 ScrollController 和可滚动组件关联时，可滚动组件首先会调用 ScrollController 的 createScrollPosition() 方法来创建一个 ScrollPosition 来存储滚动位置信息，接着，可滚动组件会调用 attach() 方法，将创建的 ScrollPosition 添加到 ScrollController 的 positions 属性中，这一步称为“注册位置”，只有注册后 animateTo() 和 jumpTo() 才可以被调用。

当可滚动组件销毁时，会调用 ScrollController 的 detach() 方法，将其 ScrollPosition 对象从 ScrollController 的 positions 属性中移除，这一步称为“注销位置”，注销后 animateTo() 和 jumpTo() 将不能再被调用。

需要注意的是， ScrollController 的 animateTo() 和 jumpTo() 内部会调用所有 ScrollPosition 的 animateTo() 和 jumpTo() ，以实现所有和该 ScrollController 关联的可滚动组件都滚动到指定的位置。

Flutter Widget树中子Widget可以通过发送通知（Notification）与父(包括祖先)Widget通信。父级组件可以通过NotificationListener组件来监听自己关注的通知

可滚动组件在滚动时会发送 ScrollNotification 类型的通知， ScrollBar 正是通过监听滚动通知来实现的。通过 NotificationListener 监听滚动事件和通过 ScrollController 有两个主要的不同：

示例
下面，我们监听ListView的滚动通知，然后显示当前滚动进度百分比：

在接收到滚动事件时，参数类型为ScrollNotification，它包括一个metrics属性，它的类型是ScrollMetrics，该属性包含当前ViewPort及滚动位置等信息：

***隐藏网址***

flutter 在 GridView 中 Text 控件第二行文字显示不全怎么解决

用 Expanded 和 TextOverflow.clip
Widget testText() {
return GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: 8,
itemBuilder: (BuildContext context, int index) {
return Expanded(
child: Text(
"测试两行测试两行测测试两行测试两行测试两行测试两行测试两行测试两行测试两行测两行测试两行测试两行测试两行测试两行测试两行测试两行",
overflow: TextOverflow.clip,
style: TextStyle(fontSize: 20),
));
},
);
}