flutter - 如何在 Flutter 中使用 BottomNavigationBar 维护 Webview 状态

Question

我正在创建一个 Flutter 应用程序，它使用 BottomNavigationBar 在页面之间进行更改。在其中一个页面中，我有一个 Webview(我使用的是 Flutter 开发团队开发的 plugin)，当我导航到另一个选项卡然后返回时，我无法保持 webview 的状态。也不知道有没有办法。

我试过使用 PageStorageBucket 和 AutomaticKeepAliveClientMixin，但无济于事。我注意到在使用 PageStorageBucket 时，一个简单的 ListView 的状态保持在选项卡之间，但它似乎不适用于 Webview。

这是一个最小的、可重现的示例:

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _pages;
  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _pages = [
      Center(
        child: Text('HOME'),
      ),
      WebView(
        initialUrl: 'https://flutter.io',
        javascriptMode: JavascriptMode.unrestricted,
      )
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.web), title: Text('Web')),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
      body: _pages[_selectedIndex],
    );
  }

https://imgur.com/qOm7uEa

当我返回到 Webview 选项卡时，我希望网络处于相同的状态，我不希望它重新加载。

Answer 1

您可以为此使用 IndexedStack。它永远不会卸载 child 。但是，它会一次加载它们[产生一点延迟]

    body:IndexedStack(
              index: _selectedIndex ,
              children: <Widget>[
               FirstPage(),
               Webview(),
               //etc...
              ]
            ),