Flutter頁面保活及保持頁面跳轉位置

Aengus發表於2020-05-07
Flutter

更多文章可以訪問我的部落格：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後頁面不重新整理，而且避免了不必要的重繪，效果如下所示：

編輯與刪除

相關文章