更改BottomNavigationBar中的页面时，强制Flutter不会丢失数据

如何解决更改BottomNavigationBar中的页面时，强制Flutter不会丢失数据

我的flutter应用有一个bottomNavigationBar小部件，它实际上可以正常工作，所以...

问题是我将页面切换到另一页后，从API调用中丢失了数据，然后当我回来时，我不得不再次re-fetch进行所有操作！

避免这种情况的最佳方法是什么？

代码

// ...Some code...

class _HomeState extends State<Home> {
  List<wp.Post> posts = [];
  int _pageNumber = 1;

  Future<String> getPosts() async {
    var res = await fetchPosts(_pageNumber);
    setState(() {
      posts = res;
    });
    return "Success!";
  }

  // Get posts when app loads;
  @override
  void initState() {
    super.initState();
      this.getPosts();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: posts == null ? 0 : posts.length,itemBuilder: (BuildContext context,int index) {
        return buildPost(context,posts,index); //Building the posts list view
      },);
  }
}

解决方法

您可以使用AutomaticKeepAliveClientMixin来保持页面状态。

class _HomeState extends State<Home> with AutomaticKeepAliveClientMixin { //<== add mixin
  List<wp.Post> posts = [];
  int _pageNumber = 1;

  @override
  bool get wantKeepAlive => true; //<== add this line 

  Future<String> getPosts() async {
    var res = await fetchPosts(_pageNumber);
    setState(() {
      posts = res;
    });
    return "Success!";
  }

  // Get posts when app loads;
  @override
  void initState() {
    super.initState();
      this.getPosts();
  }

  @override
  Widget build(BuildContext context) {

    super.build(context); // <== add this line
    return ListView.builder(
      itemCount: posts == null ? 0 : posts.length,itemBuilder: (BuildContext context,int index) {
        return buildPost(context,posts,index); //Building the posts list view
      },);
  }
}

,

您还可以使用IndexedStack。例如：-

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,),home: MyHomePage(),);
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final List<Widget> myTabs = [
    Tab(text: 'one'),Tab(text: 'two'),Tab(text: 'three'),];

  TabController _tabController;
  int _tabIndex = 0;

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
  }

  _handleTabSelection() {
    if (_tabController.indexIsChanging) {
      setState(() {
        _tabIndex = _tabController.index;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> _tabs = [
      One(),Two(),Three(),];

return Scaffold(
  appBar: AppBar(),bottomNavigationBar: TabBar(
    controller: _tabController,labelColor: Colors.redAccent,tabs: myTabs,body: IndexedStack(
    children: _tabs,index: _tabIndex,);
  }
}

有关IndexedStack的更多信息，请访问here