更多文章可以訪問我的部落格：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("第二頁")
)
],
),
);
}
}
複製程式碼這樣我們就做到了在兩個頁面的切換後保持頁面不重新整理，如下圖所示：
保持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後頁面不重新整理，而且避免了不必要的重繪，效果如下所示：
