开发者社区 问答 正文

FLATTER WebView在点击功能时不能在抽屉导航中工作

我试图使用网页浏览在颤振,使用它在抽屉导航列表项目的点击方法。但没起作用。我使用了onclick(){webview(initalurl:‘’hhtp//www.google.com)}。

展开
收起
游客5akardh5cojhg 2019-12-13 14:11:29 603 分享 版权
阿里云 AI 助理回答

看起来你是在尝试在Flutter应用中实现一个网页浏览功能,并且想在抽屉导航(drawer)中的列表项点击后触发加载特定的网页。不过,你的代码示例中存在一些错误和不准确的地方。在Flutter中,使用WebView来加载网页并响应点击事件,通常需要遵循以下步骤:

  1. 导入WebView相关的包:首先确保你的pubspec.yaml文件中已经添加了webview_flutter依赖。

  2. 创建StatefulWidget:因为WebView的状态可能发生变化(比如加载不同的URL),所以推荐使用StatefulWidget。

  3. 初始化WebView:在State类中定义WebView控制器(WebViewController),并在initState方法中初始化WebView。

  4. 处理抽屉菜单点击:在抽屉列表项的点击事件处理器中,调用WebView控制器的loadUrl方法来加载新的URL。

下面是一个简化的示例代码,展示了如何实现这个功能:

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  WebViewController _webViewController;
  final Completer<WebViewController> _controllerCompleter = Completer<WebViewController>();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('WebView Example')),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              ListTile(
                title: const Text('Open Google'),
                onTap: () async {
                  if (_controllerCompleter.isCompleted) {
                    await _controllerCompleter.future.loadUrl('https://www.google.com');
                  }
                },
              ),
            ],
          ),
        ),
        body: WebView(
          initialUrl: 'https://aliyun.com', // 初始加载的URL
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controllerCompleter.complete(webViewController);
          },
          navigationDelegate: (NavigationRequest request) {
            // 可以在这里控制是否允许导航到请求的URL
            return NavigationDecision.navigate;
          },
        ),
      ),
    );
  }
}

这段代码演示了如何设置一个包含抽屉导航的Flutter应用,其中抽屉内有一个列表项,点击该列表项时会在WebView中打开Google首页。请确保你已经正确安装了webview_flutter插件,并且注意检查URL是否正确无误(你的示例中'hhtp'应该是'http')。

有帮助
无帮助
AI 助理回答生成答案可能存在不准确,仅供参考
0 条回答
写回答
取消 提交回答
问答分类:
问答标签:
问答地址: