flutter - 多个 WebView 重新加载问题 Flutter
问题描述
我使用了多个带有单独选项卡的 Webview,并在每个选项卡中BottomNavigationBarItem
加载不同的内容。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);
}
有人能告诉我哪里错了吗?提前致谢
解决方案
最后,我已经完成了 WebViewController
Here is answer multiple Webview reload with 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
推荐阅读
- c - FirebaseHttpClient_Esp8266.cpp:8:25:致命错误:ESP8266WiFi.h:没有这样的文件或目录
- c# - 如何在不更改 app.config(.NET 框架)的情况下让 VSTest 使用 ServerGC?
- javascript - 如何以日期格式显示时间?
- c# - 向 InkCanvas 添加笔画并从 WPF 中的克隆中删除?
- javascript - 这是在前端硬编码权限的好方法吗?
- sequelize.js - 别名外键不适用于续集 5.21.9
- c++ - 加入作为类成员的线程的正确方法?
- sql - 春季 JPA 查询。使用 @OneToMany 属性连接表
- scala - scala.collection.Map[Int, T] 的函子
- python - 了解 torch.nn.Flatten