inAppWebview控制器不能与IndexedStack一起工作

Question

控制器不工作，因为它应该我动态生成3个webviews在stackedIndex，控制器正在做什么，它只工作在stackedIndex的最后一个网站。

所有控制器事件都正常工作，只有当我与最后一个网站交互时。您可以使用下面的代码重现相同的结果。

IndexedStack的使用在这里是很重要的，为了防止页面在网页之间切换时重新加载，也为了维护网页的状态。

下面是代码~

---

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
class ShowItems extends StatefulWidget {
const ShowItems({Key? key}) : super(key: key);
@override
State<ShowItems> createState() => _ShowItemsState();
}
class _ShowItemsState extends State<ShowItems> {
List services = [
{
'service_name': 'expample1',
'website_link': 'https://www.example1.com/',
'icon': const Icon(Icons.location),
'color': const Color(0xffE23744)
},
{
'service_name': 'expample2',
'website_link': 'https://www.expample2.com/',
'icon': const Icon(Icons.location_on),
'color': const Color(0xfff18423)
},
{
'service_name': 'expample3',
'website_link':
'https://www.expample3.com/',
'icon': const Icon(Icons.location),
'color': const Color(0xff801A00)
},
];
}
InAppWebViewController? webViewController;
int _currentIndex = 0;

final pageController = PageController();
void onPageChanged(int index) {
setState(() {
_currentIndex = index;
});
}
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
// print(await webViewController.canGoBack());
// print(await webViewController.currentUrl());
if (await webViewController?.canGoBack() == true) {
webViewController?.goBack();
return false;
}
return false;
},
child: LayoutBuilder(
builder: (context, constraints) {
final cmh = constraints.maxHeight;
final cmw = constraints.maxWidth;
return Scaffold(
appBar: AppBar(
backgroundColor: services[_currentIndex]
['color'],
elevation: 0,
title: Text(
services[_currentIndex]['service_name']),
///here is the settings icon
actions: [
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SettingsScreen(),
));
},
icon: const Icon(Icons.settings),
splashRadius: cmh * 0.021,
)
],
),
body: IndexedStack(
index: _currentIndex,
// physics: const NeverScrollableScrollPhysics(),
children: [
for (int x = 0; x < services.length; x++)
InAppWebView(
// key: webViewKey,
initialUrlRequest: URLRequest(
url: Uri.parse(
services[x]['website_link'])),
onWebViewCreated: (controller) {
webViewController = controller;
},
initialOptions: InAppWebViewGroupOptions(
android: AndroidInAppWebViewOptions(
allowContentAccess: true,
builtInZoomControls: true,
thirdPartyCookiesEnabled: true,
allowFileAccess: true,
geolocationEnabled: true,
supportMultipleWindows: true,
),
crossPlatform: InAppWebViewOptions(
useShouldOverrideUrlLoading: true,
useOnDownloadStart: true,
allowFileAccessFromFileURLs: true,
allowUniversalAccessFromFileURLs: true,
),
),
),
],
// controller: pageController,
// onPageChanged: onPageChanged,
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedIconTheme: IconThemeData(
color: services[_currentIndex]
['color'] ??
Colors.amber),
selectedItemColor: services[_currentIndex]
['color'] ??
Colors.amber,
// unselectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
currentIndex: _currentIndex,
items: [
for (int i = 0; i < services.length; i++)
BottomNavigationBarItem(
label: services[i]['service_name'],
icon: services[i]['icon'],
),
],
onTap: (int index) {
setState(() {
_currentIndex = index;
});

},
),
);
},
),
);
}
}

Answer 1

因为你只有一个web视图控制器，在每个webview页面创建它被重新分配，只有最后一个webview的控制器会留下来。要么在索引赋值时重新分配控制器要么添加3个不同的控制器

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List services = [
{
'service_name': 'expample1',
'website_link': 'https://www.example1.com/',
'icon': Icon(Icons.location_city),
'color': const Color(0xffE23744)
},
{
'service_name': 'expample2',
'website_link': 'https://google.com/',
'icon': const Icon(Icons.location_on),
'color': const Color(0xfff18423)
},
{
'service_name': 'expample3',
'website_link': 'https://www.wikipedia.com/',
'icon': const Icon(Icons.location_city),
'color': const Color(0xff801A00)
},
];
late List<InAppWebViewController> inAppWebViewControllers;
int _currentIndex = 0;
final pageController = PageController();
void onPageChanged(int index) {
setState(() {
_currentIndex = index;
});
}
Widget build(BuildContext context) {
inAppWebViewControllers = [];
return Scaffold(
body: WillPopScope(
onWillPop: () async {
print("hi");
if (await inAppWebViewControllers[_currentIndex].canGoBack() ==
true) {
inAppWebViewControllers[_currentIndex].goBack();
return false;
}
return false;
},
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: LayoutBuilder(builder: (context, constraints) {
final cmh = constraints.maxHeight;
final cmw = constraints.maxWidth;
return Scaffold(
appBar: AppBar(
backgroundColor: services[_currentIndex]['color'],
elevation: 0,
title: Text(services[_currentIndex]['service_name']),
///here is the settings icon
actions: [
IconButton(
onPressed: () {
// Navigator.push(
//     context,
//     MaterialPageRoute(
//       builder: (context) => const SettingsScreen(),
//     ));
},
icon: const Icon(Icons.settings),
splashRadius: cmh * 0.021,
)
],
),
body: SafeArea(
child: Column(
// index: _currentIndex,
// physics: const NeverScrollableScrollPhysics(),
children: List.generate(
services.length,
(x) => CustomWebPage(
controllerList: inAppWebViewControllers,
currentIndex: _currentIndex,
x: x,
services: services)),
// controller: pageController,
// onPageChanged: onPageChanged,
),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedIconTheme: IconThemeData(
color:
services[_currentIndex]['color'] ?? Colors.amber),
selectedItemColor:
services[_currentIndex]['color'] ?? Colors.amber,
// unselectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
currentIndex: _currentIndex,
items: [
for (int i = 0; i < services.length; i++)
BottomNavigationBarItem(
label: services[i]['service_name'],
icon: services[i]['icon'],
),
],
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
),
);
}))));
}
}
class CustomWebPage extends StatelessWidget {
final int currentIndex;
final int x;
final List services;
final List<InAppWebViewController> controllerList;
const CustomWebPage(
{Key? key,
required this.currentIndex,
required this.x,
required this.services,
required this.controllerList})
: super(key: key);
@override
Widget build(BuildContext context) {
InAppWebViewController? webViewController;
return Offstage(
offstage: currentIndex != x,
child: Container(
height: MediaQuery.of(context).size.height - 200,
width: MediaQuery.of(context).size.width,
child: InAppWebView(
// key: webViewKey,
initialUrlRequest:
URLRequest(url: Uri.parse(services[x]['website_link'])),
onWebViewCreated: (controller) {
controllerList.insert(currentIndex, controller);
},
initialOptions: InAppWebViewGroupOptions(
android: AndroidInAppWebViewOptions(
allowContentAccess: true,
builtInZoomControls: true,
thirdPartyCookiesEnabled: true,
allowFileAccess: true,
geolocationEnabled: true,
supportMultipleWindows: true,
),
crossPlatform: InAppWebViewOptions(
useShouldOverrideUrlLoading: true,
useOnDownloadStart: true,
allowFileAccessFromFileURLs: true,
allowUniversalAccessFromFileURLs: true,
),
),
),
),
);
}
}