4

我正在创建一个使用 BottomNavigationBar 在页面之间进行更改的 Flutter 应用程序。在其中一个页面中，我有一个 Webview（我正在使用 Flutter 开发团队开发的插件），当我导航到另一个选项卡然后返回时，我无法保持 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 选项卡时，我希望网络处于相同的状态，我不希望它重新加载。

4

2 回答 2

2

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

    body:IndexedStack(
              index: _selectedIndex ,
              children: <Widget>[
               FirstPage(),
               Webview(),
               //etc...
              ]
            ),
于 2019-07-24T19:26:49.393 回答
1

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

我没有使用 BottomNavigationBar，而是使用了 TabBar（在 bottomNavigationBar Scaffold 字段中）。

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

于 2019-07-24T19:29:14.307 回答