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

LCQ_CG

已于 2022-09-26 09:28:28 修改

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter android

于 2022-09-21 15:47:44 首次发布

本文链接：https://blog.csdn.net/LCQ_CG/article/details/126974263

flutter 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用Flutter中的WebView实现网页的加载与展示。通过自定义类WebView和EmbeddH5，实现了网页的导航和H5页面的加载。文章提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调用

调用下面这句话，可打开网页，其中的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,
    );
  }
}