Flutter(三)：实现Flutter代码调用Android原生代码（创建WebView Plugin）

本文实现flutter代码调用Android原生Webview（本文比较长）

1.新建一个Flutter项目

2.在项目根目录下右键new>module>flutter plugin

3.自动生成如下图所示项目结构

其中webview_plugin就是我们新建的WebView插件，名字可以自由命名。

展开webview_plugin文件夹的结构如下：

我们目前只关注Android的，所以我们只需要在android文件下写，其他不变，android文件下有个WebviewPlugin.java文件，以下是我修改完的代码：

/** * WebviewPlugin */public class WebviewPlugin implements MethodCallHandler {    private Activity activity;    private WebView webView;    private Result result;    /**     * Plugin registration.     */    public static void registerWith(Registrar registrar) {        final MethodChannel channel = new MethodChannel(registrar.messenger(), "webview_plugin");        channel.setMethodCallHandler(new WebviewPlugin(registrar.activity()));    }    @TargetApi(Build.VERSION_CODES.ECLAIR_MR1)    public WebviewPlugin(Activity activity) {        this.activity = activity;        webView=new WebView(activity);        webView.getSettings().setJavaScriptEnabled(true);        webView.getSettings().setLoadWithOverviewMode(true);        webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);        webView.getSettings().setLoadsImagesAutomatically(true);// 加载网页中的图片        webView.getSettings().setUseWideViewPort(true); //设置使用视图的宽端口        webView.getSettings().setAllowFileAccess(true);// 可以读取文件缓存(manifest生效)        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {         webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);        }    }    @Override    public void onMethodCall(MethodCall call, Result result) {        this.result=result;        switch (call.method) {            case "load":                FrameLayout.LayoutParams params = buildLayoutParams(call);                LinearLayout linearLayout=new LinearLayout(activity);                linearLayout.setOrientation(LinearLayout.VERTICAL);                final TextView titleView=new TextView(activity);                titleView.setSingleLine(true);                titleView.setEllipsize(TextUtils.TruncateAt.END);                titleView.setTextColor(Color.parseColor("#FFFFFF"));              titleView.setPadding(dp2px(activity,10),dp2px(activity,20),dp2px(activity,10),0);                ViewGroup.LayoutParams titleViewParams= new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);                titleView.setLayoutParams(titleViewParams);                titleView.setText("我是标题");                titleView.setGravity(Gravity.CENTER);                ViewGroup.LayoutParams layoutParams= new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,dp2px(activity,70));                titleView.setLayoutParams(layoutParams);                titleView.setBackgroundColor(Color.parseColor("#4876FF"));                linearLayout.addView(titleView);                linearLayout.addView(webView);                activity.addContentView(linearLayout, params);                webView.setWebViewClient(new MyWebViewClient(activity, (title, isError) -> titleView.setText(title)));                webView.loadUrl(call.argument("url").toString());                break;        }    }    public class MyWebViewClient extends WebViewClient {        private final WebClientLoadListener loadListener;        Activity activity;        private boolean isError;        public MyWebViewClient(Activity activity, WebClientLoadListener loadListener) {            this.activity = activity;            this.loadListener = loadListener;        }        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            return super.shouldOverrideUrlLoading(view, url);        }        @Override        public void onPageStarted(WebView view, String url, Bitmap favicon) {            super.onPageStarted(view, url, favicon);            isError = false;        }        @Override        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {            super.onReceivedError(view, request, error);            isError = true;        }        /**         * 界面加载完后回调         *         * @param view         * @param url         */        @Override        public void onPageFinished(WebView view, String url) {            String title = view.getTitle(); // 获取网页标题            loadListener.loadFinished(title, isError);            super.onPageFinished(view, url);        }    }    public interface WebClientLoadListener {        void loadFinished(String title, boolean isError);    }    @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR2)    private FrameLayout.LayoutParams buildLayoutParams(MethodCall call) {        Map rc = call.argument("rect");        FrameLayout.LayoutParams params;        if (rc != null) {            params = new FrameLayout.LayoutParams(                    dp2px(activity, rc.get("width").intValue()), dp2px(activity, rc.get("height").intValue()));            params.setMargins(dp2px(activity, rc.get("left").intValue()), dp2px(activity, rc.get("top").intValue()),                    0, 0);        } else {            Display display = activity.getWindowManager().getDefaultDisplay();            Point size = new Point();            display.getSize(size);            int width = size.x;            int height = size.y;            params = new FrameLayout.LayoutParams(width, height);        }        return params;    }    private int dp2px(Context context, float dp) {        final float scale = context.getResources().getDisplayMetrics().density;        return (int) (dp * scale + 0.5f);    }}

其中registerWith(Registrar registrar)就是注册插件的方法，这个不用改

   public static void registerWith(Registrar registrar) {        final MethodChannel channel = new MethodChannel(registrar.messenger(), "webview_plugin");        channel.setMethodCallHandler(new WebviewPlugin(registrar.activity()));    }

最主要的是onMethodCall(MethodCall call, Result result)方法，以下call.method是约定的方法名，外面通过此方法与原生的进行通讯，在此plugin里我只约定了“load”这个方法，其他方法照写，我这个plugin比较简单，就一个LinnearLayout里包含一个Textview（标题）和WebView，详情代码见如下，最后执行activity.addContentView(linearLayout, params)来实现创建布局。

    @Override    public void onMethodCall(MethodCall call, Result result) {        this.result=result;        switch (call.method) {            case "load":                FrameLayout.LayoutParams params = buildLayoutParams(call);                LinearLayout linearLayout=new LinearLayout(activity);                linearLayout.setOrientation(LinearLayout.VERTICAL);                final TextView titleView=new TextView(activity);                titleView.setSingleLine(true);                titleView.setEllipsize(TextUtils.TruncateAt.END);                titleView.setTextColor(Color.parseColor("#FFFFFF"));                titleView.setPadding(dp2px(activity,10),dp2px(activity,20),dp2px(activity,10),0);                ViewGroup.LayoutParams titleViewParams= new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);                titleView.setLayoutParams(titleViewParams);                titleView.setText("我是标题");                titleView.setGravity(Gravity.CENTER);                ViewGroup.LayoutParams layoutParams= new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,dp2px(activity,70));                titleView.setLayoutParams(layoutParams);                titleView.setBackgroundColor(Color.parseColor("#4876FF"));                linearLayout.addView(titleView);                linearLayout.addView(webView);                activity.addContentView(linearLayout, params);                webView.setWebViewClient(new MyWebViewClient(activity, (title, isError) -> titleView.setText(title)));                webView.loadUrl(call.argument("url").toString());                break;        }    }

接下来就是写plugin包下的的WebviewPlugin.dart文件，这个文件才是相当于一个桥梁，连接着我们的Android代码，也提供了供flutter代码调用的方法，以下我们只声明了一个 launch(String url,Function callback, { Rect rect,}) 方法，url和callback（相当于java中的接口）和可选参数Rect（设置plugin的位置和大小），完成这几个文件，我们就基本完成了Plugin的构建了。

import 'dart:async';import 'dart:ui';import 'package:flutter/services.dart';class WebviewPlugin {  static const MethodChannel _channel = const MethodChannel('webview_plugin');  static Future get platformVersion async {    final String version = await _channel.invokeMethod('getPlatformVersion');    return version;  }  //声明plugin加载的方法，参数为url，callback回调，和可选参数Rect（控制）plugin的大小  Future launch(    String url,    Function callback, {    Rect rect,  }) async {    Map args = {      "url": url,    };    if (rect != null) {      args["rect"] = {        "left": rect.left,        "top": rect.top,        "width": rect.width,        "height": rect.height      };    }    final String result = await _channel.invokeMethod('load', args);    if (callback != null) {      callback(result);    }  }}

下面我们开始来示范如何调用我们完成的了的这个webview_plugin,以下看我们主项目中lib文件夹下的main.dart的代码

首先声明final flutterWebviewPlugin = new WebviewPlugin();

然后点击事件触发以下flutterWebviewPlugin.launch方法，参数依次是url，callbacl和Rect
flutterWebviewPlugin.launch( "https://blog.csdn.net/qq_16247851/article/details/81210771", (data) { setState(() { title = data; }); },rect: new Rect.fromLTWH(0.0, 0.0, MediaQuery.of(context).size.width, MediaQuery.of(context).size.height));

import 'dart:async';import 'package:flutter/material.dart';import 'package:webview_plugin/webview_plugin.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new MaterialApp(      title: 'Webview',      theme: new ThemeData(        primarySwatch: Colors.blue,      ),      home: new MyHomePage(title: 'Flutter Demo Home Page'),    );  }}class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);  final String title;  @override  _MyHomePageState createState() => new _MyHomePageState();  @override  initState() {}}class _MyHomePageState extends State {  StreamSubscription _back;  var title = "demo";  final flutterWebviewPlugin = new WebviewPlugin();  @override  Widget build(BuildContext context) {    return new Scaffold(body: new Center(      child: new RaisedButton(onPressed: () {        flutterWebviewPlugin.launch(            "https://blog.csdn.net/qq_16247851/article/details/81210771",            (data) {          setState(() {            title = data;          });        },            rect: new Rect.fromLTWH(0.0, 0.0, MediaQuery.of(context).size.width,                MediaQuery.of(context).size.height));      }),    ));  }  @override  void initState() {    // TODO: implement initState    super.initState();  }}

这样下来整个项目基本完成了，效果图如下（蓝色部分为头部，内容为网页的title，下面部分是webview）：

更多相关文章

随机推荐