zoukankan      html  css  js  c++  java
  • flutter的webview案例

    flutter 加载webview

    安装插件  flutter_webview_plugin: ^0.2.1

    从listview点击item跳转页面加载详情页案例

    import 'dart:async';
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
     
    /**
     * @Description  新闻网页,h5
     * @Author  zhibuyu
     * @Date 2018/10/19  9:09
     * @Version  1.0
     */
    class NewsWebPage extends StatefulWidget{
      String  news_url;
      String title;
     
      NewsWebPage(this.news_url,this.title);
     
      @override
      State<StatefulWidget> createState()=>new NewsWebPageState(news_url,title);
     
    }
    class NewsWebPageState extends State<NewsWebPage>{
      String  news_url;
      String title;
      // 标记是否是加载中
      bool loading = true;
      // 标记当前页面是否是我们自定义的回调页面
      bool isLoadingCallbackPage = false;
      GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey();
      // URL变化监听器
      StreamSubscription<String> onUrlChanged;
      // WebView加载状态变化监听器
      StreamSubscription<WebViewStateChanged> onStateChanged;
      // 插件提供的对象,该对象用于WebView的各种操作
      FlutterWebviewPlugin flutterWebViewPlugin = new FlutterWebviewPlugin();
     
      NewsWebPageState(this.news_url, this.title);
     
      @override
      void initState() {
        onStateChanged = flutterWebViewPlugin.onStateChanged.listen((WebViewStateChanged state){
          // state.type是一个枚举类型,取值有:WebViewState.shouldStart, WebViewState.startLoad, WebViewState.finishLoad
          switch (state.type) {
            case WebViewState.shouldStart:
            // 准备加载
              setState(() {
                loading = true;
              });
              break;
            case WebViewState.startLoad:
            // 开始加载
              break;
            case WebViewState.finishLoad:
            // 加载完成
              setState(() {
                loading = false;
              });
              if (isLoadingCallbackPage) {
                // 当前是回调页面,则调用js方法获取数据
                parseResult();
              }
              break;
          }
        });
      }
      // 解析WebView中的数据
      void parseResult() {
    //    flutterWebViewPlugin.evalJavascript("get();").then((result) {
    //      // result json字符串,包含token信息
    //
    //    });
      }
     
      @override
      Widget build(BuildContext context) {
        List<Widget> titleContent = [];
        titleContent.add(new Text(
         title,
          style: new TextStyle(color: Colors.white),
        ));
        if (loading) {
          // 如果还在加载中,就在标题栏上显示一个圆形进度条
          titleContent.add(new CupertinoActivityIndicator());
        }
        titleContent.add(new Container( 50.0));
        // WebviewScaffold是插件提供的组件,用于在页面上显示一个WebView并加载URL
        return new WebviewScaffold(
          key: scaffoldKey,
          url:news_url, // 登录的URL
          appBar: new AppBar(
            title: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: titleContent,
            ),
            iconTheme: new IconThemeData(color: Colors.white),
          ),
          withZoom: true,  // 允许网页缩放
          withLocalStorage: true, // 允许LocalStorage
          withJavascript: true, // 允许执行js代码
        );
      }
     
      @override
      void dispose() {
        // 回收相关资源
        // Every listener should be canceled, the same should be done with this stream.
        onUrlChanged.cancel();
        onStateChanged.cancel();
        flutterWebViewPlugin.dispose();
        super.dispose();
      }
    }
    

      

    在跳转的地方调用
    
    Navigator.of(widget.parentContext).push(
    
    new MaterialPageRoute(builder: (context) {
    
    return new NewsWebPage(link,tiltes,);//link,title为需要传递的参数
    
    },
    
    ));
    

      

  • 相关阅读:
    JavaScript实现HTML导航栏下拉菜单[悬浮显示]
    Paper Pal:一个中英文论文及其代码大数据搜索平台
    小程序定位地图模块全系列开发教学(超详细)
    简单的个人介绍网页主页面【附代码】
    前端分页功能(通用)
    打造完美写作系统:Gitbook+Github Pages+Github Actions
    移动端布局
    三剑客var,let,const
    包含多个段的程序01 零基础入门学习汇编语言29
    更灵活的定位内存地址的方法01 零基础入门学习汇编语言32
  • 原文地址:https://www.cnblogs.com/pythonClub/p/10652819.html
Copyright © 2011-2022 走看看