inAppWebview controller 不使用 IndexedStack

Question

controller 不工作，因为我应该在 stackedIndex 中动态生成 3 个 Web 视图，controller 正在做什么，它只在 stackedIndex 中的最后一个网站上工作。

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

IndexedStack 的使用在这里很重要，以防止在网页之间切换时重新加载页面，并保持网页的 state。

这是代码~

---

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

由于您只有 1 个 web 视图 controller，并且在每个 webview 页面创建时，它都会被重新分配，只有最后一个 webview 的 controller 会保留。 当您为索引重新分配 controller 或添加 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, ), ), ), ); ); } }