Flutter - WebView 问题

Question

对于一个工作项目，我需要使用 WebView 将网站转换为应用程序

我被困在显示部分，我不知道控制器是如何工作的（我的误解）。我在 webview_flutter 下：^4.7.0 和 sdk>=2.19.0 < 3.0.0

也许你会找到解决方案（当然你会的，我是 Flutter 和 Dart 的新手，只有 5 个小时）

谢谢你帮助我

这是 web_view_container.dart 文件

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart'; // Import the package

class WebViewContainer extends StatelessWidget {
  final String initialUrl;

  const WebViewContainer({required this.initialUrl, super.key});

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(
      initialUrl: initialUrl,
      javascriptMode: JavascriptMode.unrestricted,
    );
  }
}

这是我的 main.dart 文件

import 'package:flutter/material.dart';
import 'package:vertbaudet_webview/web_view_container.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(
  MaterialApp(
    debugShowCheckedModeBanner: false,
    routes: {
      '/': (context) => const WebViewExample(),
      '/webViewContainer': (context) => const WebViewContainer(initialUrl: 'https://www.vertbaudet.fr/',),
    },
  ),
);

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  int selectedIndex = 0;
  final List<String> webViewList = [
    "https://google.com",
    "https://yahoo.com",
    "https://baidu.com"
  ];
  late WebViewController? controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Accueil",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: "Exemple",
          ),
        ],
        currentIndex: selectedIndex,
        selectedItemColor: Colors.cyan,
        onTap: (i) {
          setState(() {
            selectedIndex = i;
          });
          controller?.loadRequest(webViewList[i] as Uri);
        },
      ),
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(255, 255, 255, 01),
        toolbarHeight: 5,
        elevation: 0,
      ),
      body: WebViewContainer(initialUrl: webViewList[selectedIndex]),
    );
  }
}

我除了有一个包含 4 个元素的导航栏之外，当您单击一个图标时，URL 会更改为预期的

Answer 1

这是一个简单的解决方案。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        routes: {
          '/': (context) => const WebViewExample(),
        },
      ),
    );

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  int selectedIndex = 0;
  final List<String> webViewList = ["https://google.com", "https://yahoo.com", "https://baidu.com"];
  late WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(webViewList[selectedIndex]));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Accueil",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: "Exemple",
          ),
        ],
        currentIndex: selectedIndex,
        selectedItemColor: Colors.cyan,
        onTap: (i) {
          setState(() {
            selectedIndex = i;
          });
          controller.loadRequest(Uri.parse(webViewList[i]));
        },
      ),
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(255, 255, 255, 01),
        toolbarHeight: 5,
        elevation: 0,
      ),
      body: WebViewContainer(
        controller: controller,
      ),
    );
  }
}

class WebViewContainer extends StatelessWidget {
  final WebViewController controller;

  const WebViewContainer({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(
      controller: controller,
    );
  }
}