多个WebView重新加载问题Flutter [英] Multiple WebView Reload issue Flutter
问题描述
我使用了多个带有单独的BottomNavigationBarItem
标签的Webview,并在每个标签中加载了不同的URL
.
I have used multiple Webviews with Separate BottomNavigationBarItem
tabs and load different URL
in each tab.
问题在于,如果首先打开,则第一个TAB URL会完美加载,但是当我点击第二个"选项卡时,它将显示第一个选项卡Webview.如果从第三个选项卡恢复正常,则第三个选项卡包含普通文本Widget
,但效果很好,但是请单击第一个和第二个选项卡始终显示最后加载的URL
我的代码在这里
The issue is that when if open first the first TAB URL load perfectly but when I tap on the Second tab that it Displays first tab Webview. The third tab contains normal Text Widget
if comeback from the third tab then work perfectly But click on first and second tab Always Display the last loaded URL
my code is here
家庭班
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容器类
WebView Container 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
推荐答案
最后,我已经完成了 WebViewController
以下是使用 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
文件中:
Add this to your package's pubspec.yaml
file:
dependencies:
webview_flutter: ^0.3.22+1
这篇关于多个WebView重新加载问题Flutter的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!