多个 WebView 重新加载问题 Flutter

Question

我使用了多个带有单独 BottomNavigationBarItem 选项卡的 Web 视图，并在每个选项卡中加载了不同的 URL。

问题是，如果首先打开第一个 TAB URL，则可以完美加载，但是当我点击第二个选项卡时，它会显示第一个选项卡 Webview。第三个选项卡包含普通文本 Widget 如果从第三个选项卡恢复，则可以正常工作 但是单击第一个和第二个选项卡 始终显示最后加载的 URL 我的代码在这里

家庭课堂

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'web_view_container.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {

  int _selectedIndex = 0;

  static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  List<Widget> _widgetOptions = <Widget>[
    WebViewContainer('https://offerscouponsdeals.in/'),
    WebViewContainer('https://flutter.io'),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('RSVP App'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

WebView 容器类

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class _WebViewContainerState extends State < WebViewContainer >{
  var _url;
  final _key = UniqueKey();
  _WebViewContainerState(this._url);
  num _stackToView = 1;

  void _handleLoad(String value) {
    setState(() {
      _stackToView = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: IndexedStack(
          index: _stackToView,
          children: [
            Column(
              children: < Widget > [
                Expanded(
                    child: WebView(
                      key: _key,
                      javascriptMode: JavascriptMode.unrestricted,
                      initialUrl: _url,
                      onPageFinished: _handleLoad,
                    )
                ),
              ],
            ),
            Container(
              color: Colors.white,
              child: Center(
                child: CircularProgressIndicator(),
              ),
            ),
          ],
        )
    );
  }
}

class WebViewContainer extends StatefulWidget {
  final url;
  WebViewContainer(this.url);
  @override
  createState() => _WebViewContainerState(this.url);
}

谁能告诉我我哪里错了？提前致谢

Answer 1

我终于完成了 WebViewController 这里是多个 Webview 重新加载的答案 Loader

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {

  final _key = UniqueKey();
  bool _isLoadingPage;
  WebViewController controller;
  int _selectedIndex = 0;

  List<String> arr_links = [
    'https://pub.dev/',
    'https://flutter.io',
    'https://www.google.com/',
  ];

  @override
  void initState() {
    super.initState();
    _isLoadingPage = true;
  }


  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Multiple WebView'),
      ),
      body: Stack(
        children: <Widget>[
          WebView(
            key: _key,
            initialUrl: arr_links[_selectedIndex],
            javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            controller = webViewController;
          },
            onPageFinished: (finish) {
              setState(() {
                _isLoadingPage = false;
              });
            },
          ),
          _isLoadingPage ? Scaffold(
            body: Center(
              child: CircularProgressIndicator(
                valueColor: new AlwaysStoppedAnimation<Color>(
                    Colors.white),
              ),
            ),
            backgroundColor: Colors.black.withOpacity(
                0.70), // this is the main reason of transparency at next screen. I am ignoring rest implementation but what i have achieved is you can see.
          ) : Stack()
        ],
      ),

      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      _isLoadingPage = true;
      controller.loadUrl(arr_links[_selectedIndex]);
    });
  }
}

将此添加到您的包的pubspec.yaml 文件中：

dependencies:
  webview_flutter: ^0.3.22+1