如何获得 ScrollController 的全尺寸
How to get full size of a ScrollController
我已将 ScrollController 附加到 [SliverAppBar, SliverList] 的 CustomScrollView
在默认情况下,我会使用 reverse:true 和 animateTo (0.0) 将滚动条移动到添加的最后一个元素,但在这种情况下,使用 reverse 也会颠倒 SliverAppBar/SliverList 顺序!
所以我想使用 animateTo ( sizeOfScrollableAfterElementAdded ) 但我找不到这个值。
谢谢!
您可以使用_scrollController.position.maxScrollExtent
滚动到末尾。确保在 post 帧回调中执行此操作,以便它包含您刚刚添加的新项目。
这是一个滚动条列表的示例,它会随着添加更多项目而滚动到末尾。
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<MyHomePage> {
ScrollController _scrollController = new ScrollController();
List<Widget> _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((_) {
_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,
),
),
],
),
);
}
}
此外,如果您想在开始时立即滚动到列表的底部(在 initState() 中),您可以在第一次调用 setState() 之前放置来自 Collin 解决方案的以下代码块。
class ExampleState extends State<Example>{
void initState(){
super.initState();
_scrollController = new ScrollController();
void _getListItems() async{
//get list items
SchedulerBinding.instance.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 100),
curve: Curves.ease,
);
});
setState((){
});
}
}
}
我已将 ScrollController 附加到 [SliverAppBar, SliverList] 的 CustomScrollView
在默认情况下,我会使用 reverse:true 和 animateTo (0.0) 将滚动条移动到添加的最后一个元素,但在这种情况下,使用 reverse 也会颠倒 SliverAppBar/SliverList 顺序!
所以我想使用 animateTo ( sizeOfScrollableAfterElementAdded ) 但我找不到这个值。
谢谢!
您可以使用_scrollController.position.maxScrollExtent
滚动到末尾。确保在 post 帧回调中执行此操作,以便它包含您刚刚添加的新项目。
这是一个滚动条列表的示例,它会随着添加更多项目而滚动到末尾。
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<MyHomePage> {
ScrollController _scrollController = new ScrollController();
List<Widget> _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((_) {
_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,
),
),
],
),
);
}
}
此外,如果您想在开始时立即滚动到列表的底部(在 initState() 中),您可以在第一次调用 setState() 之前放置来自 Collin 解决方案的以下代码块。
class ExampleState extends State<Example>{
void initState(){
super.initState();
_scrollController = new ScrollController();
void _getListItems() async{
//get list items
SchedulerBinding.instance.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 100),
curve: Curves.ease,
);
});
setState((){
});
}
}
}