Flutter 如何创建列表视图自动滚动?
Flutter how to create List view autoscrolling?
我正在尝试制作一个自动滚动到最新数据点的 ListView。
我厌倦了通过制作一个使用 .jumpTo 方法的 _scrollToBottom 函数来做到这一点。
但是我在应用程序中出现空白屏幕,并且
'child.parentData != null': is not true.
在调试控制台中。
关于如何实现自动滚动有什么建议吗?
这是我当前代码的相关部分:
ScrollController _scrollController = ScrollController();
_scrollToBottom(){ _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: DataShareWidget.of(context).stream,
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.hasError){ return Text(snapshot.error);}
if(snapshot.hasData){
_dataFormat(snapshot.data);
return ListView.builder(
itemCount: _listViewData.length,
controller: _scrollController,
reverse: true,
shrinkWrap: true,
itemBuilder: (context, index) {
_scrollToBottom();
return ListTile(
title: AutoSizeText(_listViewData[index], maxLines: 2),
dense: true,
);
},
);
}
}
);
}
问题出在您的 StreamBuilder 代码中。如果快照还没有准备好,您需要 return 一些东西。
试试这个代码:
ScrollController _scrollController = ScrollController();
_scrollToBottom(){ _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: DataShareWidget.of(context).stream,
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.hasError){ return Text(snapshot.error);}
if(snapshot.hasData){
_dataFormat(snapshot.data);
return ListView.builder(
itemCount: _listViewData.length,
controller: _scrollController,
reverse: true,
shrinkWrap: true,
itemBuilder: (context, index) {
_scrollToBottom();
return ListTile(
title: AutoSizeText(_listViewData[index], maxLines: 2),
dense: true,
);
},
);
}
//Something waiting the snapshot
return CircularProgressIndicator();
}
);
}
您需要的是在列表完全构建后调用 _scrollToBottom()
方法。
修改是你的代码(没有StreamBuilder):
ScrollController _scrollController = ScrollController();
_scrollToBottom() {
_scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToBottom());
return Scaffold(
body: ListView.builder(
itemCount: 50,
// itemCount: _listViewData.length,
controller: _scrollController,
reverse: true,
shrinkWrap: true,
itemBuilder: (context, index) {
return ListTile(
title: Text('Yo Dummy Text $index'),
// title: AutoSizeText(_listViewData[index], maxLines: 2),
dense: true,
);
},
),
);
}
你需要做到这一点并完美地工作....
ScrollController _scrollController = ScrollController();
@override
Widget build(BuildContext context) {
_scrollController.animateTo(_scrollController.position.maxScrollExtent, duration: Duration(milliseconds: 200), curve: Curves.easeOut);
return StreamBuilder(
stream: stream = Firestore.instance
.collection('your collaction')
.document('your document')
.snapshots(),
builder: (context, snapshot) {
return snapshot.hasData
? ListView.builder(
controller: _scrollController,
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) =>
msgTile(snapshot.data.documents[index], user1),
)
: Text('Loading...');
},
);
}
我正在尝试制作一个自动滚动到最新数据点的 ListView。 我厌倦了通过制作一个使用 .jumpTo 方法的 _scrollToBottom 函数来做到这一点。
但是我在应用程序中出现空白屏幕,并且
'child.parentData != null': is not true.
在调试控制台中。
关于如何实现自动滚动有什么建议吗?
这是我当前代码的相关部分:
ScrollController _scrollController = ScrollController();
_scrollToBottom(){ _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: DataShareWidget.of(context).stream,
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.hasError){ return Text(snapshot.error);}
if(snapshot.hasData){
_dataFormat(snapshot.data);
return ListView.builder(
itemCount: _listViewData.length,
controller: _scrollController,
reverse: true,
shrinkWrap: true,
itemBuilder: (context, index) {
_scrollToBottom();
return ListTile(
title: AutoSizeText(_listViewData[index], maxLines: 2),
dense: true,
);
},
);
}
}
);
}
问题出在您的 StreamBuilder 代码中。如果快照还没有准备好,您需要 return 一些东西。 试试这个代码:
ScrollController _scrollController = ScrollController();
_scrollToBottom(){ _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: DataShareWidget.of(context).stream,
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.hasError){ return Text(snapshot.error);}
if(snapshot.hasData){
_dataFormat(snapshot.data);
return ListView.builder(
itemCount: _listViewData.length,
controller: _scrollController,
reverse: true,
shrinkWrap: true,
itemBuilder: (context, index) {
_scrollToBottom();
return ListTile(
title: AutoSizeText(_listViewData[index], maxLines: 2),
dense: true,
);
},
);
}
//Something waiting the snapshot
return CircularProgressIndicator();
}
);
}
您需要的是在列表完全构建后调用 _scrollToBottom()
方法。
修改是你的代码(没有StreamBuilder):
ScrollController _scrollController = ScrollController();
_scrollToBottom() {
_scrollController.jumpTo(_scrollController.position.maxScrollExtent);
}
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToBottom());
return Scaffold(
body: ListView.builder(
itemCount: 50,
// itemCount: _listViewData.length,
controller: _scrollController,
reverse: true,
shrinkWrap: true,
itemBuilder: (context, index) {
return ListTile(
title: Text('Yo Dummy Text $index'),
// title: AutoSizeText(_listViewData[index], maxLines: 2),
dense: true,
);
},
),
);
}
你需要做到这一点并完美地工作....
ScrollController _scrollController = ScrollController();
@override
Widget build(BuildContext context) {
_scrollController.animateTo(_scrollController.position.maxScrollExtent, duration: Duration(milliseconds: 200), curve: Curves.easeOut);
return StreamBuilder(
stream: stream = Firestore.instance
.collection('your collaction')
.document('your document')
.snapshots(),
builder: (context, snapshot) {
return snapshot.hasData
? ListView.builder(
controller: _scrollController,
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) =>
msgTile(snapshot.data.documents[index], user1),
)
: Text('Loading...');
},
);
}