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

最新推荐文章于 2021-11-05 15:26:58 发布
最新推荐文章于 2021-11-05 15:26:58 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： Flutter实用开发技巧合集 文章标签： flutter 返回顶部 flutter返回顶部 flutter返回顶部按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CodingFire/article/details/108852690
版权
本文介绍了如何在Flutter中创建一个返回顶部的小控件，包括监听滚动事件、改变页面偏移量以及使用Stack和Positioned布局使按钮浮动。通过示例代码详细展示了实现过程。
摘要由CSDN通过智能技术生成

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

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

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

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

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

	//这个widget.controller就是外部传入的被监听的这个滚动的'控制器'或者页面吧
    widget.controller?.addListener(isScroll)
了解本专栏 订阅专栏 解锁全文 超级会员免费看
CodingFire
关注
专栏目录
订阅专栏
Flutter基本控件介绍
学无止境
01-07 1万+
Flutter控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，例如，Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果，您可以用这种新...
如何调试flutter应用
热门推荐
学无止境
12-27 1万+
命令运行app，运行的时候，在控制台可以看到一个Observatory URL(如http://127.0.0.1:8100/)，我们可以通过浏览器打开，直接用语句级的单步调试程序连接到你的应用程序。标志位会打开一种特殊模式，让所有的对象都突出显示，这个可以帮助你发现哪一个对象不能正确的进行测试，比如，某个对象在其父类的范围之外，就不会第一时间被考虑进行命中测试。为true来更直观的调试布局问题，这是渲染库中的一个布尔变量，当该变量为true时，它可以随时生效，并且影响所有地方的绘制。
listview内容超出屏幕高度，自动显示回到listview顶部的按钮
07-13
listview内容超出屏幕高度，自动显示回到listview顶部的按钮，点击按钮自动返回到listview顶部，代码附有注释，简单易懂
页面返回顶部小控件
weixin_34248849的博客
06-14 68
博客设置>页面定制css代码，贴入如下代码： #gotoTop {display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-10px;margin-left:550px;padding:9px 4px;width:20px;text-align:right;border:1px solid #e0e0...
点击按钮返回顶部
weixin_34253126的博客
05-18 265
1、html部分 <div class='a'> <div class='b'></div> </div> <div id="btn">返回顶部</div> 2、css部分 div.a{ width:300px; height:10000px; ...
Flutter开发之顶部导航实现
lentolove的博客
11-05 878
引言 学习Flutter的基础控件的使用。 推荐学习的书籍：《Flutter实战-第二版》 Flutter官方教程 实现顶部导航 主要控件： TabBar 顶部导航 TabBarView 导航视图 辅助控件： Scaffold： 实现了基本的 material 布局样式 Flexible：Flexible是一个控制Row、Column、Flex等子组件如何布局的组件。Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如，Row在水平
ios-自定义点击状态栏滚回顶部
aa4197435的博客
08-16 165
点击状态栏滚回顶部这个功能是系统自带的,只需要设置self.scrollView.scrollsToTop = YES即可, 但是这个属性有一个前提是窗口下必须只有一个可滚动的View才有效果,这时候就需要自定义创建一个窗口 来完成这个功能。 添加窗口 在AppDelegate创建一个新的窗口必须给这个窗口设置一个根控制器,否则会报错,这里可以通过dispatch_af...
Flutter基础（二）Flutter开发环境搭建和Hello World
Android进阶三部曲 - 刘望舒
07-10 1356
本文首发于公众号「刘望舒」 关联系列 ReactNative入门系列 React Native组件 Flutter基础系列 前言 其实没想写Flutter的相关文章的，因为这些看官方文档就够了，但是有不少同学就想看我写的，因此我也写个Flutter系列，顺便自己也梳理下知识点。这个Flutter基础系列是Flutter系列的入门系列，后面还会有其他的Flutter系列。既然要学习Flutte...
Flutter学写个NIO APP(一，NIO首页结构)
王亟亟的博客
03-30 1088
转载请著名出处王亟亟的大牛之路 源码地址：https://github.com/ddwhan0123/flutter_tutorial 强烈建议在看这篇文章之前学完https://book.flutterchina.club/，这样基本就能带着自己的理解去看我的解释和思路，事半功倍哦！(不是广告，我自己也看 觉得翻译得不错) 去年到现在 去年下半年到现在一直在做React Native相关到工...
用Flutter实现一个精美的点单功能
鸿蒙开发知识记录
06-05 842
文章来源于：公众号【秦子帅】 前一段时间项目集成了Flutter做了许多的功能模块，再加上很久没有文章产出，所以打算写这么一篇文章来总结和记录Flutter开发中的一些问题 ps:demo中的数据都从assets\data\文件夹下的json文件读取，所以并没有涉及到网络请求封装，项目架构等相关知识，这个demo偏注重于点单结构的实现。 总体的效果如下所示： 整体结构分析 首页的店铺入口没什么好说的，它主要是我们点单功能的入口和店铺购物车商品数的展示。 下面我们主要来分...
flutter 好看的顶部栏 拉上后回自动回收
jsp13270124的博客
06-01 611
import 'dart:math'; import "package:flutter/material.dart"; main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", theme: ThemeDat
ListView自己回滚到最顶端的问题
lilybaobei的专栏
07-18 9846
今天QA报来一个Bug，说是联系人界面的ListView在从其他界面返回后自动滚到顶端了，而要求是要保持在原来的位置。 原先这个界面是自动保持了位置的（没有代码来设置这个），不知道什么时候就老是刷的滚动最顶端了。看了下代码木有找到问题，原先的代码不也是这样的嘛。我又没改。郁闷了，最近点好背，前面遇到个crash到现在也没找到原因的，好不容易组织次游泳就突然下暴雨的。。。%%&*^&$#@$ 最
Android状态栏点击滚动,点击状态栏回到scrollView回到最顶部
weixin_42298254的博客
05-26 978
点击状态栏滚回顶部这个功能是系统自带的,只需要设置self.scrollView.scrollsToTop = YES即可，但是这个属性的前提是窗口下必须只有一个可滚动的View才有效果，这时候就需要自定义创建一个窗口来完成这个功能界面含有多个scrolView时，点击状态栏回到顶部失效iOS9以后创建的window要给添加根控制器，否则会报错。可以通过dispatch_after来给添加窗口一个...
ListView返回顶部问题
flomeworld
03-31 412
listview.setAdapter(someAdapter)可以是listview跳转到顶部，但是不能刷新数据
Flutter开发(十六)：Flutter顶部导航、底部导航与侧拉菜单
wuqingsen1的博客
11-01 2474
1.APP 首页框架搭建 2.轮播图 Banner 开发 3.自定义 AppBar 滚动渐变 1.APP 首页框架搭建 实现导航需要用到 Scaffold 和 BottomNavigationBar ，PageView 和 PageController。 Scaffold widget 是实现了基本的 material design 的布局结构。里面包括了常用的标题 appBar ，内容 body，侧拉 drawer。 示例代码： void main() { runApp(MyApp
flutter列表无法滚动到底部_Flutter 列表滑动到顶部浮动按钮实现
weixin_39781326的博客
12-19 599
import 'package:flutter/material.dart';class ScrollControllerDemoPage extends StatefulWidget {@override_ScrollControllerDemoPageState createState() =>_ScrollControllerDemoPageState();}class _Scroll...
回到顶部效果
baidu_33163851的博客
04-28 443
html lang="en"> head> meta charset="UTF-8"> title>回到顶部效果title> style> .box{ width: 1190px; margin: 0 auto; } #btn{ width: 40px;
13.Flutter学习之路AppBar实现顶部tab
易帜¤的博客
03-05 969
AppBar 属性 描述 leading 在标题前面显示一个控件，在首页通常显示引用logo，在其他界面则是返回键 title 标题，通常显示当前页面的标题文字，可以放组件 actions 通常使用IconButton来表示，可以放按钮组 bottom 通常会放TabBar，在标题下面显示一个Tab导航栏 backgroundColor 导航背景颜色 iconT...
Flutter ListView无法置顶问题
倚栏静望的博客
08-27 1745
如下代码 Scaffold( body: ListView.builder( ), ) 不设置AppBar直接使用ListView充满屏幕，但是ListView顶部会有一个导航栏宽度的留白，这时只需将ListView的padding属性，设置为：EdgeInsets.only(top: 0) 即可解决。 Scaffold( body: ListView.bui...
Flutter控件--TextFiled
最新发布
05-26
Flutter中的TextField是一个常用的输入控件，它允许用户在应用程序中输入文本。 TextField通常用于表单中，可以接收用户输入的文本，比如用户名、密码、电子邮件地址等。 以下是一个基本的TextField示例： ```dart TextField( decoration: InputDecoration( hintText: '请输入文本', ), ); ``` 在上面的示例中，我们使用了decoration属性来设置TextField的外观，其中hintText属性用于设置提示文本。 TextField还有许多其他的属性可以设置，比如maxLength（允许输入的最大长度）、keyboardType（键盘类型）、obscureText（是否隐藏输入内容）等等。 下面是一个更完整的TextField示例： ```dart class MyTextField extends StatefulWidget { @override _MyTextFieldState createState() => _MyTextFieldState(); } class _MyTextFieldState extends State<MyTextField> { final TextEditingController _controller = TextEditingController(); @override Widget build(BuildContext context) { return TextField( controller: _controller, maxLength: 10, keyboardType: TextInputType.text, obscureText: true, decoration: InputDecoration( hintText: '请输入文本', labelText: '文本框', prefixIcon: Icon(Icons.text_fields), suffixIcon: IconButton( icon: Icon(Icons.clear), onPressed: () { setState(() { _controller.clear(); }); }, ), border: OutlineInputBorder(), ), onChanged: (value) { print('输入的文本为：$value'); }, ); } } ``` 在上面的示例中，我们使用了TextEditingController来控制TextField的文本内容，maxLength属性限制了用户输入的最大长度为10，keyboardType属性指定了键盘类型为文本类型，obscureText属性设置为true表示隐藏输入内容。 此外，我们还设置了decoration属性来自定义TextField的外观，包括了输入提示文本、标签文本、前缀图标、后缀图标和边框样式等。 最后，我们通过onChanged回调函数来监听用户输入的文本，并打印出来。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodingFire

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值