【flutter】特别篇：嵌入H5页面2

调用

调用下面这句话，可打开网页，其中的WebView是自定义封装的类。传入的第一个参数是url，传入的第二个参数是BuildContext，传入的第三个参数是可选参数map

WebView("https://www.baidu.com",context)

比如用按钮包裹起来，点击之后就跳转

ElevatedButton(
  onPressed: ()=>{
     WebView("https://www.baidu.com",context)
  },
child: Text('test',textDirection: TextDirection.ltr,))

解释

在WebView的构造方法中，用Navigator添加EmbeddH5这个路由，EmbeddH5也是一个自定义的类：

Navigator.push(context, MaterialPageRoute<void>(
      builder: (BuildContext context){
        return Scaffold(
            appBar: AppBar(title:Text(mapParams['title'])),
            body: EmbeddH5(url,mapParams)
        );

EmbeddH5是一个statefulWidget，主要是通过WebViewScaffold来加载H5页面

WebviewScaffold(
   url: url,
   appBar: AppBar(
   title: Text(mapParams['title'])
),

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'dart:ui';
/*WebView其他地方调用的接口类*/
class WebView{
  late String url;
  late Map mapParams;
  late BuildContext context;
  WebView(this.url,this.context,[this.mapParams = const {'title':'FlutterWebView'} ]){
    Navigator.push(context, MaterialPageRoute<void>(
      builder: (BuildContext context){
        return Scaffold(
            appBar: AppBar(title:Text(mapParams['title'])),
            body: EmbeddH5(url,mapParams)
        );
      }
    ));
  }
}

class EmbeddH5 extends StatefulWidget {
  late String url;
  late Map mapParams;
  late BuildContext context;
  EmbeddH5(this.url,[this.mapParams = const {'title':'FlutterWebView'}]);

  @override
  _EmbeddH5State createState() =>_EmbeddH5State(url: url,mapParams: mapParams);
}

class _EmbeddH5State extends State<EmbeddH5> {
  String url;
  Map mapParams;
  _EmbeddH5State({required this.url, required this.mapParams});
  @override
  Widget build(BuildContext context) {
    print(mapParams);
    return MaterialApp(
      home: Scaffold(
          body: Container(
            padding: EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),//把H5页面整体往下移动状态栏那么高的位置
            //下面这个代码是插件里渲染页面的API
            child: WebviewScaffold(
              url: url,
              appBar: AppBar(
                title: Text(mapParams['title'])
              ),
              //当WebView没加载出来前显示的东西
              initialChild: Container(
                color: Colors.white,
                child: Center(
                  child: Text('正在加载'),
                ),
              ),
            ),
          )),
      ///隐藏Debug标志
      debugShowCheckedModeBanner: false,
    );
  }
}