多个 WebView 重新加载问题 Flutter

Question

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

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

首页Class

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 容器Class

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);
}

Can someone tell me where I am Wrong? Thanks in advance

Answer 1

终于完成了 WebViewController 这是使用Loader

重新加载多个 Webview 的答案

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

多个 WebView 重新加载问题 Flutter

Multiple WebView Reload issue Flutter

flutter

dart

flutterwebviewplugin