flutter之webview

最新推荐文章于 2025-06-12 18:06:08 发布

my_love_download

最新推荐文章于 2025-06-12 18:06:08 发布

阅读量434

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/my_love_download/article/details/117356211

flutter 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Flutter应用中使用webview_flutter实现一个可定制的Web视图组件，展示报表，包括创建CustomWebView类和配置初始URL、javascriptMode等关键步骤。

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

flutter项目需要加载报表的解决方案

下载包

webview_flutter: ^0.3.19+7

实现公共的webview组件

class CustomWebView extends StatefulWidget {
  final String title;
  final String url;
  CustomWebView({
    this.title,
    this.url,
  });
  @override
  State<StatefulWidget> createState() => _CustomWebView();
}

class _CustomWebView extends State<CustomWebView> {
  String baseUrl = HttpManager().BASEURL;
  _CustomWebView();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(
        titleText: '报表',
        actions: [
          Container(
            margin: EdgeInsets.only(
              right: 10,
            ),
            child: CustomIcon(
              icon: Icons.share,
              color: CustomColor.white,
              size: 25,
              ontap: () {
               
              },
            ),
          )
        ],
      ),
      body: Builder(builder: (BuildContext context) {
        return WebView(
          initialUrl: '${baseUrl}${widget.url}',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {},
          gestureNavigationEnabled: true,
        );
      }),
    );
  }
}