Flutter - 按返回按鈕到 android 主屏幕時丟失 state

Question

我對 flutter 有疑問。 我已經設法實現了一個基本的導航系統，當您執行以下任一操作時，該系統會保留 state：

• 在選項卡之間切換
• 按 android 主頁按鈕並重新打開應用程序（通過再次單擊應用程序或使用活動應用程序按鈕列表（底部的小方塊））

但是，如果我按下返回按鈕 - 返回 android 主屏幕，我將完全失去 state。 我重新實現了一些代碼來隨機生成一個數字並將其顯示在應用程序上——這樣我就知道我得到的是相同的小部件還是已經構建了新的小部件。

為什么我需要這個？ （如果您有興趣）我正在創建一個音頻應用程序，當我單擊播放歌曲時，它會播放。 但是當我點擊回到主屏幕並讓它在后台播放 -> 然后再次打開應用程序時，我可以再次播放並讓它播放兩次！

主要的：

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 刪除小部件並不完全確定。 但是如果你想保存當前的 state 只需使用導航器推送不要彈出。 也使用命名路由，這將對您有很大幫助。

Answer 2

使用 Provider 傳遞 state 並保持全局存儲。

如果您的應用需要擴展，現在是開始使用 MobX/BLoC/Redux/InheritedWidget.. 等的好時機。