flutter滑动控件,flutter左右卡片滑动

Flutter 滑动、缩放控件

onInteractionEnd 交互结束

onInteractionStart 交互开始

onInteractionUpdate 滑动时候一直会回调

focalPoint 是相对于屏幕左上角的偏移量。

localFocalPoint是相对于父容器区域左上角的偏移量。

scale缩放量。

horizontalScale水平缩放量。

verticalScale竖直缩放量。

rotation旋转量。------ 这里说明能监听到旋转量

还可以通过transformationController进行变换控制，有兴趣的可以自己研究。

参考文章

相关问答

Q1: Flutter 之 Sliver 系列控件

SliverAppBar 控件，一个 MD 的 AppBar 。属性和 AppBar 类似，但做的效果比 AppBar 更加强大。相同的属性具体可以看 Flutter 之 Scaffold 控件 ， 里面有 AppBar 控件的介绍。那么还有些没有的属性：

结合 elevation 使用，当elevation 不为 0 的时候，是否显示阴影

AppBar 展开时候的高度

true 的时候下滑AppBar优先滑动展示，展示完成后才给滑动控件滑动

snap 为 true, 则 floating 也要为 true 。true 的时候根据手指松开的位置展开或者收缩AppBar

appBar 收缩到最小高度的时候 appBar 是否可见

SliverAppBar 往往做为 CustomScrollView 的第一个子元素，根据滚动控件的偏移量或者浮动的位置来改变 SliverAppBar 的高度。所以具体用法如下

另外在上面设计到 FlexibleSpaceBar 控件，FlexibleSpaceBar 有个 collapseMode 属性

为 Sliver 系列控件添加一个 padding 。如给上面 SliverAppBar 添加一个 Padding 。

多行多列的列表控件，相当于 Android 的 GridView，有两个属性

SliverChildDelegate，这里有两种方式创建

SliverGridDelegate，也是有两种方式创建

结合上面展示效果

和上面 delegate 属性一样，需要创建一个 SliverChildDelegate 。

比 SliverList 多一个 itemExtent 属性，设置 item 的高度 。item 里面的子控件无法再改动高度。

上面 SliverAppBar 就是结合 SliverPersistentHeader 实现的效果，SliverPersistentHeader 需要一个 SliverPersistentHeaderDelegate 。 实现 SliverPersistentHeaderDelegate 有 4 个方法需要重写

至于效果，具体效果具体分析。

有一个 Widget 属性，主要作用是在 CustomScrollView 里面添加多种不同布局的样式。

占满一屏或者比一屏更多的布局，

滑动剩余部分展示的布局

Q2: Flutter：手把手教你使用滚动型列表组件：ListView

ListView的基础创建使用有三种方式：

通过默认构造函数来创建列表，应用场景 = 短列表

这种方式创建的列表存在一个问题：对于那些长列表或者需要较昂贵渲染开销的子组件，即使还没有出现在屏幕中但仍然会被ListView所创建，这将是一项较大的开销，使用不当可能引起性能问题甚至卡顿。

长列表

列表子项之间需要分割线

ListView的进阶使用主要包括：下拉刷新 上拉加载

在Flutter中，ListView结合RefreshIndicator组件实现下拉刷新

通过包裹一层RefreshIndicator，自定义onRefresh回调方法实现

方式有两种：

通过ListView.controller属性可以判断ListView是否滑动到了底部，再进行上拉加载

NotificationListener是一个Widget，可监听子Widget发出的Notification

ListView在滑动时中会发出ScrollNotification类型的通知，可通过监听该通知得到ListView的滑动状态，判断是否滑动到了底部，从而进行上拉加载

NotificationListener有一个onNotification属性，定义了监听的回调方法，通过它来处理加载更多逻辑

不定期分享关于 安卓开发 的干货，追求 短、平、快 ，但 却不缺深度 。

Q3: Flutter CustomScrollView 自定义滑动效果

基本和AppBar一样,只是他只能在CustomScrollView中使用,应该很常见,滑动的时候固定appbar,就需要用到他.

大部分和appbar一样,主要说下重要的几个:

是否将导航栏部分固定在appbar的位置.这个需求在实际中很常用. 看看效果图.

当 pinned = false:

可以看到appbar并没有固定在最上面,而是根据内容划出了界面.

当 pinned = true :

这个应该是需求中经常用到的效果了.

当floating = false :

当floating = true:

仔细看 ，区别是在列表整体向下滑动时,appbar开始显示的位置不同.

当为false时 ,向下滑动时,会先降列表内容滑动顶部,然后appbar会跟着列表滑动显示出来.如上图

当为true时, 向下滑动时,appbar会先跟着列表滑动显示出来. 然后继续列表的滑动. 如上图

不能单独使用要配合 ****floating 和 ****pinned

具体效果看官网地址

是否展开,默认false,直接看值为true的效果图,就明白了.

可以再里面添加扩展的内容:

通过测试发现 **后面不是 FlexibleSpaceBar 的话, stretch = true 无效. **

和Padding一样.子控件是 sliver 类型...

上图中在padding中添加了一个背景色为青色的容器widget

里面可以设置不是 sliver 类型的widget。如上图中的 padding中添加的 container

就两个协议,一个是布局协议一个展示协议.基本和GridView一样.也有count和extext... 不设置个数默认无数个

SliverChildListDelegate 这种方式前提是知道cell个数，比较少，好搭建

SliverChildBuilderDelegate 这种方式，可以根据数组去创建，不知道cell个数

和listview差不多.也是协议 不设置个数默认无数个

Q4: Flutter初学 —— 常用控件使用

在编写几个 Flutter 项目后，发现 Flutter 的强大之处在于业务中所有用到的控件以及场景都有对应的处理方案；而 Dart 语言也与 Java 、 Kotlin 类似，所以对 Android 开发者来说门槛非常低；特意记录一下常用的控件及其使用：

StatelessWidget 不需要额外的创建 State

StatefulWidget 创建 State 类，并可以在其中保存一些状态

only 可以单独设置每个方向的内边距

类似于 LinearLayout 中的 orientation 设置为 vertical ， mainAxisAlignment 表示竖向的一个对齐方式， crossAxisAlignment 表示横向的对齐方式

与 Column 相反，主轴是横向，对齐方式类似， crossAxisAlignment 表示竖向的对齐方式

类似 SizedBox ，一个容器，但是主要功能是有一个 decoration —— 装饰器，作用是绘制背景，或者使用 item 中的阴影

栈，先入后出，类似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定显示在某一个位置

配合多 child 使用，会填充剩余的空间

Image 功能强大，使用不同的方法可以加载不同来源的图片

看到这些方法，突然觉得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形状的图片，无论是圆形还是五角星都不在话下，然而 Android 要实现不规则的形状，可是要下不少功夫的。

名字和 Android 的一模一样，但是用法却比 Android 的简单很多：

主要就是 itemCount 与 itemBuilder ,其余就是配置样式， itemBuilder 需要返回一个 widget ，当然了，每个 ListView 都有其对应的 item ，在里面的方法中编写 widget 即可

与 ListView 类似，但是需要有一个 delegate 类，作用是设置有多少列，每一列之间的间距是多少

GridView 没有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的样式， Flutter 中通常是使用装饰器来处理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

Q5: webview_flutter滑动存在卡顿问题的完美解决方法

1.webview_flutter

2.flutter_inappwebview

3.flutter_webview_plugin

笔者最近发现webview_flutter在Android端嵌套带有较长的Webview页面时偶欧会存在卡顿问题表现为加速向下滑动到页面底部，然后从底部慢慢像上滑就不起作用了，体验很不好，经过一天的排查和实验发现是webview_flutter插件自己的问题，用原生嵌套WebView并没有问题，后来改成flutter_webview_plugin问题可以解决，但是flutter_webview_plugin插件并不是基于flutter渲染的并不能在嵌套webview的页面自定义flutter样式层，后来发现使用flutter_inappwebview插件能够完美解决问题。推荐你们用flutter_inappwebview。