我正在开发一个Flutter应用程序,它使用**ListView.builder
来显示容器列表。我已经实现了分页,当用户到达当前列表的末尾时,新的容器被提取并添加到列表中。但是,每次添加新容器时,滚动位置都会重置到列表的顶部,这不是所需的行为。
我已按照建议使用AutomaticKeepAliveClientMixin
,并将ListView.builder
设置为true
**,但问题仍然存在。下面是我的代码示例:
class ViewScreen extends StatefulWidget {
const ViewScreen({super.key});
@override
State<ViewScreen> createState() => ViewScreenState();
}
class ViewScreenState extends State<ViewScreen> with AutomaticKeepAliveClientMixin {
static final List<Widget> containers = [];
final ScrollController _scrollController = ScrollController();
List<Map<String,dynamic>> previousCards = [ //I have used it as a dummy database in real I will request an API that will return some data in it that is used in the container that is displayed];
@override
void initState() {
super.initState();
loadContainers();
_scrollController.addListener(() {
if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
// User has reached the end of the list, trigger "load more" action
loadContainers();
_addAllPreviousCards();
}
});
}
void loadContainers() async {
previousCards.clear();
// call the API again to fetch more containers
// starting from containers.length
if(containers.length < allContainers.length) {
for (int i = containers.length; i < containers.length + 6; i++) {
previousCards.add(allContainers[i]);
}
}
}
void _addAllPreviousCards() async{
for(int i = 0;i<previousCards.length;i++) {
setState(() {
containers.add(
MyContainer(
text: previousCards[i]['request'][text],
),
);
});
}
}
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
Widget content =Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 20),
Expanded(
flex: 1,
child: ListView.builder(
key: UniqueKey(),
controller: _scrollController,
itemCount: containers.length ,
itemBuilder: (BuildContext context, int index) {
return containers[index];
}
)
),
],
);
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: Container(
color:const Color.fromRGBO(255, 255, 255, 1),
child: Padding(
padding: const EdgeInsets.only(left: 10, right: 10),
child: content
),
),
)
)
);
}
@override
bool get wantKeepAlive => true;
}
我在实现中是否遗漏了什么?当向**ListView.builder
**添加新项目时,是否有其他方法保留滚动位置?任何帮助将不胜感激。谢谢你。
1条答案
按热度按时间ni65a41a1#
我用它来分页调用API它不会自动滚动。
Copyright © 2018 - 2019 www. jsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsjsj setState();});