如何在小部件的容器内显示 pdf [flutter-web]
Posted
技术标签:
【中文标题】如何在小部件的容器内显示 pdf [flutter-web]【英文标题】:How to display pdf inside container of widget [flutter-web] 【发布时间】:2021-02-21 02:20:36 【问题描述】:我想在我的flutter-web项目中打开pdf文件,只要我知道......当我打开pdf时,它总是将我导航到新标签,有没有办法在小部件容器内显示pdf扑? 所以,到目前为止我只通过这样做打开pdf文件
html.window.open('http://xxxx.pdf',"my_pdf");
我仍然不知道如何将它放入小部件颤动中
【问题讨论】:
请在您的问题中提供一些您已经拥有的代码。 【参考方案1】:您可以在下面复制粘贴运行完整代码
在演示代码中,我在Container
上添加了blue border
代码sn-p
class Iframe extends StatelessWidget
Iframe()
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory('iframe', (int viewId)
var iframe = html.IFrameElement();
iframe.src = 'http://www.africau.edu/images/default/sample.pdf';
return iframe;
);
@override
Widget build(BuildContext context)
return Container(
decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
width: 400,
height: 300,
child: HtmlElementView(viewType: 'iframe'));
工作演示
完整代码
import 'package:flutter/material.dart';
// import 'dart:io' if (dart.library.html) 'dart:ui' as ui;
import 'dart:ui' as ui;
import 'dart:html' as html;
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
class MyHomePage extends StatelessWidget
@override
Widget build(BuildContext context)
return Scaffold(
body: Center(child: Iframe()),
floatingActionButton: FloatingActionButton(
onPressed: () ,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
class Iframe extends StatelessWidget
Iframe()
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory('iframe', (int viewId)
var iframe = html.IFrameElement();
iframe.src = 'http://www.africau.edu/images/default/sample.pdf';
return iframe;
);
@override
Widget build(BuildContext context)
return Container(
decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
width: 400,
height: 300,
child: HtmlElementView(viewType: 'iframe'));
【讨论】:
以上是关于如何在小部件的容器内显示 pdf [flutter-web]的主要内容,如果未能解决你的问题,请参考以下文章
通过 addPostFrameCallback 访问 Flutter Provider 时说小部件在小部件树之外,但颤振检查器显示其他情况
Flutter - 如何在小部件测试中选择 DropdownButton 项