Flutter开发 - 写一个返回顶部功能的小控件

CodingFire

于 2020-09-28 16:57:57 发布

阅读量1.4k

点赞数

分类专栏： Flutter实用开发技巧合集文章标签： flutter 返回顶部 flutter返回顶部 flutter返回顶部按钮

本文链接：https://blog.youkuaiyun.com/CodingFire/article/details/108852690

版权

34 篇文章 ¥19.90 ¥99.00

订阅专栏

本文介绍了如何在Flutter中创建一个返回顶部的小控件，包括监听滚动事件、改变页面偏移量以及使用Stack和Positioned布局使按钮浮动。通过示例代码详细展示了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看下效果图
在这里插入图片描述

在开发中，很多场景都会使用的返回顶部的功能，那么在flutter中，返回顶部的按钮要怎么做呢？

首先，我们要来写一个按钮：

好吧，我相信大家都会写这个按钮。

其次，监听页面的滚动，原生中我们使用delegate，可以知道滚动的距离，在flutter中怎么监听呢？看代码：

	//这个widget.controller就是外部传入的被监听的这个滚动的'控制器'或者页面吧
    widget.controller?.addListener(isScroll)

了解本专栏