更多文章可以访问我的博客Aengus | Blog
Flutter中保持页面不刷新以及保持ListView的浏览位置是非常常见的需求，在网上找过很多教程，能做到的只是PageView的切换可以保活，但是一旦使用Navigator.push后页面就会重新build。网上有人说使用ScrollController记录偏移位置的体验并不好，而且还要指定ListView中的item的高度，后来问了一下B站上关注的up主并自己摸索了一段时间后才完成这个需求。我们分为两个步骤进行：保持页面不刷新；保持ListView的跳转位置。
下面的代码是一个App中的，我们分开进行说明。
保持页面不刷新
网上大部分的教程都是说的这个，比较简单，但是是比较重要的一个步骤。我们需要在HomePage中with AutomaticKeepAliveClientMixin，并且重写wantKeepAlive的get方法为true。
import 'package:flutter/material.dart';
import 'package:flutter_app/first_page.dart';
import 'package:flutter_app/second_page.dart';
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePage();
}
}
class _HomePage extends State<StatefulWidget> with AutomaticKeepAliveClientMixin{
List<Widget> pageList = List()..add(FirstPage())..add(SecondPage());
int _currentIndex = 0;
PageController _pageController;
@override
bool get wantKeepAlive => true;
@override
void initState() {
super.initState();
_pageController = PageController(initialPage: 0);
}
@override
Widget build(BuildContext context) {
// AutomaticKeepAliveClientMixin需要调用super.build(context)
super.build(context);
return Scaffold(
body: PageView(
children: pageList,
controller: _pageController,
onPageChanged: (index) {
setState(() {
_currentIndex = index;
});
},
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) => _pageController.jumpToPage(index),
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.first_page),
title: Text("第一页")
),
BottomNavigationBarItem(
icon: Icon(Icons.last_page),
title: Text("第二页")
)
],
),
);
}
}
这样我们就做到了在两个页面的切换后保持页面不刷新，如下图所示：
2020-02-07-scroll.gif
保持ListView的跳转位置
这个我们需要配合Provider及Consumer使用，Provider可以避免不必要的页面绘制，以提升应用性能，也建议使用它来减少setState()的使用。
首先我们需要建立一个model，作为应用中的共享数据，并mixin入ChangeNotifier，以下面为例：
import 'package:flutter/material.dart';
class DataList with ChangeNotifier {
List<String> list = List();
void init() {
list..add("第1个列表")..add("第2个列表")..add("第3个列表")..add("第4个列表")
..add("第5个列表")..add("第6个列表")..add("第7个列表")..add("第8个列表")
..add("第9个列表")..add("第10个列表")..add("第11个列表")..add("第12个列表")
..add("第13个列表")..add("第14个列表");
}
void updateData(int index, String value) {
list[index] = value;
notifyListeners();
}
void deleteData(int index) {
list.removeAt(index);
notifyListeners();
}
}
需要在共享数据的顶层（一般是应用入口）使用Provider：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_app/data_list.dart';
import 'package:flutter_app/home_page.dart';
void main() {
DataList dataList = DataList()..init();
runApp(ChangeNotifierProvider<DataList>.value(
value: dataList,
child: MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
然后在需要使用共享数据DataList的时候使用Consumer：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_app/data_list.dart';
import 'package:flutter_app/edit_page.dart';
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("第一页"),
),
body: Consumer<DataList>(
builder: (context, model, child) {
return ListView.builder(
itemBuilder: (context, index) => ListTile(
title: Text(model.list[index]),
onTap: () =>
Navigator.push(context, MaterialPageRoute(
builder: (context) => EditPage(model.list[index], index)
)).then((value) {
if (value != null) {
if (value is String) {
model.updateData(index, value);
} else if(value is int) {
model.deleteData(value);
}
}
}),
),
// 有确切数量的话需要指定，否则会报错
itemCount: model.list.length,
);
},
),
);
}
}
EditPage页代码如下所示：
import 'package:flutter/material.dart';
class EditPage extends StatefulWidget {
final String value;
final int index;
EditPage(this.value, this.index);
@override
State<StatefulWidget> createState() {
return _EditPage(value, index);
}
}
class _EditPage extends State<StatefulWidget> {
TextEditingController controller;
String value;
int index;
_EditPage(this.value, this.index);
@override
void initState() {
super.initState();
controller = TextEditingController(text: value);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("编辑页面"),
actions: <Widget>[
FlatButton(
child: Text("删除", style: TextStyle(color: Colors.white),),
onPressed: () => Navigator.pop<int>(context, index),
),
FlatButton(
child: Text("保存", style: TextStyle(color: Colors.white),),
onPressed: () => Navigator.pop<String>(context, controller.text),
)
],
),
body: Center(
child: Padding(
child: TextField(controller: controller,),
padding: EdgeInsets.only(left: 30, right: 30),
)
),
);
}
}
这样我们就做到了页面Navigator.push与pop后页面不刷新，而且避免了不必要的重绘，效果如下所示：
2020-02-07-edit-delete.gif
