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。它将永远不会卸下孩子们。但是，它将立即加载它们[产生一些滞后]

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

Answer 2

好吧，经过一番挖掘，我设法找到了解决方法。

我不是使用BottomNavigationBar，而是使用TabBar（在bottomNavigationBar支架字段中）。

将其与AutomaticKeepAliveClientMixin结合使用，不会卸载选项卡，并且通过更改选项卡可以保持状态。

如何使用Flutter中的BottomNavigationBar维护Webview状态

2 个答案: