flutter滚动到底部_flutter ScrollController如何滚动到底部?
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如何滚动到底部?相关推荐
- 【Flutter从入门到实战】 ⑨、滚动的Widget-ListView、GridView、SliverWidget、滚动的Widget的滚动监听的方式
Flutter从入门到实战 一共分为23个系列 ①(Flutter.Dart环境搭建篇) 共3个内容 已更新 ②(Dart语法1 篇) 共4个内容 已更新 ③(Dart语法2 篇) 共2个内容 已更新 ...
- android固定位置滚动文本,android – 滚动文本上方的按钮,按钮固定在底部
我在 Android应用程序中难以获得我想要的GUI布局结果. 简要描述我想要的: GUI包含两个TextView和四个按钮. 四个按钮将水平布置,全部在同一行中,并固定在屏幕的右下角. 两个Text ...
- 小程序scroll-view,滚动到最低_小程序滚动到底部
小程序scroll-view,滚动到最低_小程序滚动到底部 小程序滚动条,滚到最底部解决方案1 小程序滚动到底部使用Scorll-view实现方案: scrill-view:组件要固定高度. scro ...
- flutter图片聊天泡泡_flutter即时聊天IM仿微信|flutter聊天界面
鉴于Flutter最近比较火,今天给大家分享的是基于flutter+dart全家桶技术开发的仿微信界面聊天FlutterChat项目实例.实现了消息+表情.图片预览.红包.长按菜单.视频/仿朋友圈等功 ...
- 浏览器滚动的详细解释 Vue 固定滚动位置的实现
滚动形成的条件 父子两个元素 子元素的高 > 父元素的高, 并且父元素 overflow:scroll; ok, 那么现在考虑这种情况: 假设: 有父子两个元素, 子元素的高度 > 父元素 ...
- 设置下载安装 桌面_滚动图标——手机图标随着手势滚动,让你的桌面动起来...
滚动图标是一款非常酷炫.有趣的桌面图标美化软件.该软件玩的是就是图标,可以随意设置图标的数量,最多支持添加80个图标,让应用图标在桌面上可以随意移动.软件自带重力感应,当你将手机翻转过来的时候,所有图 ...
- html土图片滚动特效,jQuery实现图片左右滚动特效
本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考,具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止 ...
- 微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.6 scroll-view组件,在小程序中如何实现滚动锚定,如何渲染一个滚动的长列表?
scroll-view 是一个可以滚动的视图区域的容器组件. 一.重要属性 scroll-view 的滚动属性,实现了两套功能 左右或上下滚动 下拉更新 1.1 与滚动有关的属性: scroll-x ...
- pandas使用groupby函数计算dataframe数据中每个分组的N个数值的指数权重移动(滚动)平均、例如,计算某公司的多个店铺每N天(5天)的滚动销售额指数权重移动(滚动)平均
pandas使用groupby函数计算dataframe数据中每个分组的N个数值的指数权重移动(滚动)平均(Exponential Moving Average).例如,计算某公司的多个店铺每N天(5 ...
最新文章
- 鸿蒙os即将升级,央视爆料鸿蒙OS即将升级,荣耀智慧屏强大自研开启国货新时代...
- 面试题: Vue中的 computed 和 watch的区别
- haproxy1.8安装配置
- 腾讯 监控系统服务器数据采集,实战低成本服务器搭建千万级数据采集系统
- 爱立信物联网加速器让各行业玩转数据
- sscanf 连续相同编辑符_【第1995期】钉钉文档编辑器的前世今生
- 广告拦截之easylist和easylistchina订阅地址
- 计算机辅助开始于计算机发展的第几个阶段,计算机辅助开始于计算机发展第几阶段...
- 诺基亚五摄手机国行版终于来了:下午见!
- console查看对象结构
- Hvv近期0day总结二
- AIDA64内存与缓存测试过了算稳定吗_高频内存能带来怎样的不同!影驰HOF OC Lab Master DDR4 4000内存评测...
- 2.2 DP: Value Iteration Gambler‘s Problem
- 使用docker创建属于你的ChatGPT
- 华为运营商级路由器配置示例 | 配置OptionB方式跨域BGP VPLS示例(ASBR兼做PE)
- 编程之美---数字之魅
- 国标28181:海康、大华、宇视摄像头怎么添加GB28181协议
- 【Linux】【编译相关】execvp: /bin/sh: Argument list too long问题处理小结
- CSS3 3D旋转立方
- 安卓FTP客户端无法连接FTP服务器FineFTP