对ListView小部件设置reverse: true会将最新元素显示在底部。这样,您就可以轻松实现聊天时间线。
ListView.builder(
reverse: true,
itemBuilder: (context, index) => _chatCell(),
)
Run Code Online (Sandbox Code Playgroud)
您需要创建一个scrollController并将其传递给ListView并运行如下代码:
class SampleList extends StatefulWidget {
@override
_SampleListState createState() => _SampleListState();
}
class _SampleListState extends State<SampleList> {
ScrollController _scrollController;
@override
Widget build(BuildContext context) {
return ListView.builder(
controller: _scrollController,
itemBuilder: (_, index) => ListTile(
title: Text(
index.toString(),
),
),
);
}
void scrollToBottom() {
final bottomOffset = _scrollController.position.maxScrollExtent;
_scrollController.animateTo(
bottomOffset,
duration: Duration(milliseconds: 1000),
curve: Curves.easeInOut,
);
}
@override
void initState() {
_scrollController = ScrollController();
super.initState();
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
}
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
2859 次 |
最近记录: |