Flutter页面保活及保持页面跳转位置

Aengus Sun 1,032 2020-02-06

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后页面不刷新，而且避免了不必要的重绘，效果如下所示：

编辑与删除

解决方案 Flutter