Flutter中如何让ListViewBuilder最新列表项置顶且从容器顶部填充?
解决Flutter ListView最新交易置顶且从顶部填充的问题
不用ListView.builder的reverse: true,直接调整数据源的顺序就能实现需求,具体两种方法:
方法1:客户端反转数据源
从SQLite拿到expenses列表后,直接反转列表顺序,让最新交易排在列表头部,再传给ListView展示:
// 获取数据后反转 final reversedExpenses = expenses.reversed.toList(); // 传入txList txList(expenses: reversedExpenses)
然后ListView正常编写,不需要加reverse: true:
ListView.builder( itemCount: expenses.length, itemBuilder: (context, index) { return YourTransactionItem(expense: expenses[index]); }, )
方法2:SQL查询时直接倒序(更高效)
在SQL查询语句里按交易时间倒序排列,这样从数据库拿到的就是最新交易在前,不需要客户端额外处理:
SELECT * FROM expenses ORDER BY created_at DESC;
拿到数据后直接用ListView展示即可,完全不用反转操作,性能更优。
为什么原来的reverse: true不行?
reverse: true会同时反转列表项顺序和ListView的布局锚点,导致列表从容器底部开始填充,这不是我们要的效果。我们只需要列表项顺序反转,布局还是从顶部开始,所以调整数据源顺序才是正确思路。
内容的提问来源于stack exchange,提问作者Priyanshu
相关产品推荐
相关产品推荐

