时间戳

首页 > 解决方案 > Flutter - 按下返回按钮到android主屏幕时丢失状态

android - Flutter - 按下返回按钮到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;
  }
}

任何帮助将不胜感激 ：）

标签： androidfluttermobile

解决方案

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

推荐阅读