flutter - BottomNavigatonBar 的 onTap(index) 方法上的 SetState() 不会重建小部件树

Question

我正在尝试将 webview_flutter WebView 连接到 BottomNavigationBar。我希望在点击选项卡时使用新 URL 重新加载 View 。在onTap 回调我将 _currentUrl 更新为新的 url 并使用新的选项卡索引调用设置状态。

为什么标签栏正在更新但网页 View 没有重建？我错过了什么？

class WebViewApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return WebViewState();
  }
}

class WebViewState extends State<WebViewApp> {
  int _currentTabIndex = 0;
  String _currentUrl = URL.home;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Demo',
      home: Scaffold(
        body: WebView(initialUrl: _currentUrl),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentTabIndex,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              title: Text('Search'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.calendar_today),
              title: Text('Profile'),
            ),
          ],
          onTap: (index) {
            switch (index) {
              case 0:
                _currentUrl = URL.home;
                break;
              case 1:
                _currentUrl = URL.search;
                break;
              case 2:
                _currentUrl = URL.calendar;
                break;
            }
            setState(() {
              _currentTabIndex = index;
            });
          },
        ),
      ),
    );
  }
}

Answer 1

您可以使用 WebView 的 WebViewController 来更改 webview 的 url

将以下代码添加到您的 WebView 小部件:

body: WebView(
  initialUrl: _currentUrl,
  onWebViewCreated: (WebViewController webController) {
    _webController = webController;
  },
),

现在，在您将 WebViewController 分配给您的 WebViewController 实例后，您可以使用 WebViewController 的 loadUrl() 方法更改当前 webview 的 url

因此您可以将 onTap 处理程序的代码更改为以下内容:

onTap: (index) {
  switch (index) {
    case 0:
      _webController.loadUrl('your_home_url');
    break;
    case 1:
      _webController.loadUrl('your_search_url');
    break;
    case 2:
      _webController.loadUrl('your_calander_url');
    break;
  }
},

WebViews 和 setState 的问题在于整个 Widget/Page 将被重建，包括 WebView 的实例，但您只想更改当前 WebView session 中的 url...