flutter ScrollController滚动到底部的示例代码如下:

方式一:import 'package:flutter/scheduler.dart';

import 'package:flutter/material.dart';

void main() {

runApp(new MyApp());}class MyApp extends StatelessWidget {

@override  Widget build(BuildContext context) {

return new MaterialApp(

title: 'Flutter Demo',

home: new MyHomePage(),

);

}

}

class MyHomePage extends StatefulWidget {

State createState() => new MyHomePageState();}class MyHomePageState extends State {

ScrollController _scrollController = new ScrollController();

List _items = new List.generate(40, (index) {

return new Text("item $index");

});

@override  Widget build(BuildContext context) {

return new Scaffold(

floatingActionButton: new FloatingActionButton(

child: new Icon(Icons.arrow_downward),

onPressed: () {

setState(() {

_items.add(new Text("item ${_items.length}"));

});

SchedulerBinding.instance.addPostFrameCallback((_) { //build完成后的回调

_scrollController.animateTo(

_scrollController.position.maxScrollExtent,//滚动到底部

duration: const Duration(milliseconds: 300),

curve: Curves.easeOut,

);

});

},

),

body: new CustomScrollView(

controller: _scrollController,

slivers: [

new SliverAppBar(

title: new Text('Sliver App Bar'),

),

new SliverList(

delegate: new SliverChildBuilderDelegate(

(context, index) => _items[index],

childCount: _items.length,

),

),

],

),

);

}}

方式二:

还有另外一种实现方式,思路就是使用反向ListView。这样滚动到0,0位置的时候,由于是反向就是到了底部(这个也是类似聊天窗口常用的反向ListView),参考以下代码:import 'dart:collection';

import 'package:flutter/material.dart';

void main() {

runApp(new MyApp());}class MyApp extends StatelessWidget {

@override  Widget build(BuildContext context) {

return new MaterialApp(

title: 'Example',

home: new MyHomePage(),

);

}

}

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => new _MyHomePageState();}class _MyHomePageState extends State {

List _messages = [new Text('hello'), new Text('world')];

ScrollController _scrollController = new ScrollController();

@override  Widget build(BuildContext context) {

return new Scaffold(

body: new Center(

child: new Container(

decoration: new BoxDecoration(backgroundColor: Colors.blueGrey.shade100),

width: 100.0,

height: 100.0,

child: new Column(

children: [

new Flexible(

child: new ListView(

controller: _scrollController,

reverse: true, //注意设置为反向

shrinkWrap: true,

children: new UnmodifiableListView(_messages),

),

),

],

),

),

),

floatingActionButton: new FloatingActionButton(

child: new Icon(Icons.add),

onPressed: () {

setState(() {

_messages.insert(0, new Text("message ${_messages.length}"));

});

_scrollController.animateTo(

0.0, //滚动到0,0就是底部(因为是反向的)

curve: Curves.easeOut,

duration: const Duration(milliseconds: 300),

);

}

),

);

}}

flutter滚动到底部_flutter ScrollController如何滚动到底部?相关推荐

  1. 【Flutter从入门到实战】 ⑨、滚动的Widget-ListView、GridView、SliverWidget、滚动的Widget的滚动监听的方式

    Flutter从入门到实战 一共分为23个系列 ①(Flutter.Dart环境搭建篇) 共3个内容 已更新 ②(Dart语法1 篇) 共4个内容 已更新 ③(Dart语法2 篇) 共2个内容 已更新 ...

  2. android固定位置滚动文本,android – 滚动文本上方的按钮,按钮固定在底部

    我在 Android应用程序中难以获得我想要的GUI布局结果. 简要描述我想要的: GUI包含两个TextView和四个按钮. 四个按钮将水平布置,全部在同一行中,并固定在屏幕的右下角. 两个Text ...

  3. 小程序scroll-view,滚动到最低_小程序滚动到底部

    小程序scroll-view,滚动到最低_小程序滚动到底部 小程序滚动条,滚到最底部解决方案1 小程序滚动到底部使用Scorll-view实现方案: scrill-view:组件要固定高度. scro ...

  4. flutter图片聊天泡泡_flutter即时聊天IM仿微信|flutter聊天界面

    鉴于Flutter最近比较火,今天给大家分享的是基于flutter+dart全家桶技术开发的仿微信界面聊天FlutterChat项目实例.实现了消息+表情.图片预览.红包.长按菜单.视频/仿朋友圈等功 ...

  5. 浏览器滚动的详细解释 Vue 固定滚动位置的实现

    滚动形成的条件 父子两个元素 子元素的高 > 父元素的高, 并且父元素 overflow:scroll; ok, 那么现在考虑这种情况: 假设: 有父子两个元素, 子元素的高度 > 父元素 ...

  6. 设置下载安装 桌面_滚动图标——手机图标随着手势滚动,让你的桌面动起来...

    滚动图标是一款非常酷炫.有趣的桌面图标美化软件.该软件玩的是就是图标,可以随意设置图标的数量,最多支持添加80个图标,让应用图标在桌面上可以随意移动.软件自带重力感应,当你将手机翻转过来的时候,所有图 ...

  7. html土图片滚动特效,jQuery实现图片左右滚动特效

    本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考,具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止 ...

  8. 微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.6 scroll-view组件,在小程序中如何实现滚动锚定,如何渲染一个滚动的长列表?

    scroll-view 是一个可以滚动的视图区域的容器组件. 一.重要属性 scroll-view 的滚动属性,实现了两套功能 左右或上下滚动 下拉更新 1.1 与滚动有关的属性: scroll-x ...

  9. pandas使用groupby函数计算dataframe数据中每个分组的N个数值的指数权重移动(滚动)平均、例如,计算某公司的多个店铺每N天(5天)的滚动销售额指数权重移动(滚动)平均

    pandas使用groupby函数计算dataframe数据中每个分组的N个数值的指数权重移动(滚动)平均(Exponential Moving Average).例如,计算某公司的多个店铺每N天(5 ...

最新文章

  1. 鸿蒙os即将升级,央视爆料鸿蒙OS即将升级,荣耀智慧屏强大自研开启国货新时代...
  2. 面试题: Vue中的 computed 和 watch的区别
  3. haproxy1.8安装配置
  4. 腾讯 监控系统服务器数据采集,实战低成本服务器搭建千万级数据采集系统
  5. 爱立信物联网加速器让各行业玩转数据
  6. sscanf 连续相同编辑符_【第1995期】钉钉文档编辑器的前世今生
  7. 广告拦截之easylist和easylistchina订阅地址
  8. 计算机辅助开始于计算机发展的第几个阶段,计算机辅助开始于计算机发展第几阶段...
  9. 诺基亚五摄手机国行版终于来了:下午见!
  10. console查看对象结构
  11. Hvv近期0day总结二
  12. AIDA64内存与缓存测试过了算稳定吗_高频内存能带来怎样的不同!影驰HOF OC Lab Master DDR4 4000内存评测...
  13. 2.2 DP: Value Iteration Gambler‘s Problem
  14. 使用docker创建属于你的ChatGPT
  15. 华为运营商级路由器配置示例 | 配置OptionB方式跨域BGP VPLS示例(ASBR兼做PE)
  16. 编程之美---数字之魅
  17. 国标28181:海康、大华、宇视摄像头怎么添加GB28181协议
  18. 【Linux】【编译相关】execvp: /bin/sh: Argument list too long问题处理小结
  19. CSS3 3D旋转立方
  20. 安卓FTP客户端无法连接FTP服务器FineFTP

热门文章

  1. 【快手备注发货接口】在拼多多上开店需要准备什么?如何开通拼多多店铺
  2. 离散数学22_第8章图__握手定理
  3. STM32芯片读保护解锁
  4. 天下3 修改默认服务器,《天下3》默认字体修改指引 简单轻松
  5. 软件测试工程师待遇怎么样?
  6. hdu4899 Hero meet devil
  7. Windows Server 2012 活动目录安装
  8. 最全蓝屏解决方法大全
  9. 热备双机中备机处理业务异常故障引发的思考
  10. sql和mapinfo处理