Flutter - 按下返回按钮到android主屏幕时丢失状态

Question

我有颤振的问题。我已经设法实现了一个基本的导航系统，当您执行以下任一操作时，该系统会保持状态：

• 在标签之间切换
• 按下 android 主页按钮并重新打开应用（通过再次单击应用或使用活动应用按钮列表（底部的小方块））

但如果我按下后退按钮 - 返回到 android 主屏幕，我会完全失去状态。我重新实现了一些代码来随机生成一个数字并将其显示在应用程序上 - 这样我就知道我得到的是相同的小部件还是新的小部件。

我为什么需要这个？ （如果你有兴趣） 我正在创建一个音频应用程序，当我单击播放歌曲时，它会播放。但是当我点击回到主屏​​幕并让它在后台播放时->然后再次打开应用程序，我可以再次播放它并播放两次！

主要：

import 'package:flutter/material.dart';
import 'BottomNavigationBarController.dart';

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

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

底部导航标签（BottomNavigationBarController）：

import 'package:flutter/material.dart';

import 'PlaceholderWidget.dart';

class BottomNavigationBarController extends StatefulWidget {
  BottomNavigationBarController({Key key}) : super(key: key);

  @override
  _BottomNavigationBarController createState() => _BottomNavigationBarController();
}

class _BottomNavigationBarController extends State<BottomNavigationBarController>{

  int _selectedPage = 0;
  List<Widget> pageList = List<Widget>();

  @override
  void initState() {
    pageList.add(PlaceholderWidget());
    pageList.add(PlaceholderWidget());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _selectedPage,
        children: pageList,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.phone_android),
            title: Text('First Page'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.phone_android),
            title: Text('Second Page'),
          ),
        ],
        currentIndex: _selectedPage,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedPage = index;
    });
  }
}

随机数小部件（PlaceholderWidget）：

import 'dart:math';

import 'package:flutter/material.dart';

class PlaceholderWidget extends StatefulWidget  {


  PlaceholderWidget({Key key, this.color}) : super(key: key);
  final Color color;
  @override
  _PlaceholderWidget createState() => _PlaceholderWidget();
}

class _PlaceholderWidget extends State<PlaceholderWidget> with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {

    return Container(
      color: widget.color,
      child: Text(random_num().toString()),
    );
  }

  int random_num(){
    Random  random = new Random();
    int randomNumber = random.nextInt(100);
    return randomNumber;
  }
}

任何帮助将不胜感激:)

Answer 1

我认为 Navigator pop 删除小部件并不完全确定。但是，如果您想保存当前状态，只需使用导航器推送，不要弹出。也使用命名路由，这将对您有很大帮助。

Answer 2

使用 Provider 传递状态并保持全局存储。

如果您的应用需要扩展，现在是开始使用 MobX/BLoC/Redux/InheritedWidget.. 等的好时机。