适用于 Linux 桌面的 Flutter PDF 查看器答案

【问题标题】：Flutter PDF Viewer for Linux desktop适用于 Linux 桌面的 Flutter PDF 查看器
【发布时间】：2022-05-04 04:46:22
【问题描述】：

我在 Flutter 上为 Android 和 Linux 桌面平台开发了某种具有 PDF 查看功能的聊天应用程序。

所以我想使用某种 PDF 阅读器或 WebBrowser 将 PDF 查看器嵌入到 Flutter 应用程序中。 Android 上的 PDF 没有问题 - pub.dev 上有 100 多个用于 PDF 和 WebView 的插件，但它们都不支持 Linux 桌面。

我尝试为 Android 和 IOS 插件添加 Linux 桌面支持，但看起来它们都使用 PlatformView 和 webview_flutter 类，Linux 桌面尚不支持：webview_flutter PlatformView。他们有 P4 优先级，没有分配里程碑。我不能无限期地等待很长时间，我应该在 2 个月内结束这个项目。那我该怎么办？

我读过 Flutter 使用 GTK+ 在 Linux 桌面上显示，我知道有GTK+ components to display PDF。那么是否有可能以某种方式在flutter ui中注入这个组件？有例子吗？

或者最好将 PDF 转换为 jpeg 并显示图像？（但我不想丢失缩放和文档导航）

使用 File.Open() 将 PDF 打开到外部程序对我来说不是解决方案，因为在这种情况下，用户应该不断在 Flutter 应用程序（我们有 PDF 文件列表的地方）和 PDF 阅读器窗口之间切换。

我是 Flutter 和 Linux 的新手，因此我们将不胜感激。

【问题讨论】：

标签： linux flutter pdf desktop

【解决方案1】：

那么是否有可能以某种方式将这个组件注入到 Flutter ui 中？

这正是PlatformView 的含义，所以这就相当于Linux 是否支持PlatformView 的问题。

在没有PlatformView 支持的情况下可以使用的两个选项：

在显示 Flutter 视图和 PDF 视图之间交换窗口（如果您希望 PDF 在显示时填满窗口）。
将 Flutter 视图和 PDF 视图并排放置在窗口中（如果您希望 Flutter 内容（如文件列表）和 PDF 内容同时可见）。

两者都需要在本机代码中完成工作，因此您需要编写一个插件，或者直接在您的运行器中实现它，并使用方法通道在 Dart 和本机代码之间进行协调。

【讨论】：

我想在一个窗口中并排放置 Flutter 视图和 PDF 视图。我不想移动或调整此窗口的大小，它应该始终处于全屏模式。在 Linux Ubuntu 上。我将尝试将两个 GTK 窗口组合在一起，这看起来像是解决方案，谢谢。
为什么要使用两个单独的窗口，而不是在同一个窗口中并排放置两个视图？

【解决方案2】：

所以只是为了阐明我们如何使用 webkit 来实现这一点，例如：

CMakeLists.txt：

#add webkit package reference
pkg_check_modules(WEBKIT2 REQUIRED IMPORTED_TARGET webkit2gtk-4.0)
...
#remove -Werror flag to allow compilation with warnings
target_compile_options(${TARGET} PRIVATE -Wall)
...
#link webkit libraries
target_link_libraries(${BINARY_NAME} PUBLIC PkgConfig::WEBKIT2) 
#somehow this line causes 'flutter run' to crash on "Linking CXX executable" step.
#Looks like it compiles, but fails to link. 
#I think there is should be other question opened for this issue.

my_application.cc：

#include "my_application.h"
#include <flutter_linux/flutter_linux.h>
#include <webkit2/webkit2.h>
#include "flutter/generated_plugin_registrant.h"

static void my_application_activate(GApplication* application) {

  GtkWidget *vbox1 = gtk_vbox_new (FALSE, 0);
  gtk_widget_show (vbox1);

  // we can insert any gtk controls in this window outside of FlView
  GtkWidget *label = gtk_label_new ("Hello GNOME!");
  gtk_box_pack_start (GTK_BOX (vbox1), label, TRUE, TRUE, 2);
  gtk_widget_show (label);

  // webkit/poppler/evince should work perfect because they gtk+
  WebKitWebView *pWebKitView = WEBKIT_WEB_VIEW(webkit_web_view_new());
  gtk_box_pack_start (GTK_BOX (vbox1), GTK_WIDGET(pWebKitView), TRUE, TRUE, 2);
  gtk_widget_show(GTK_WIDGET(pWebKitView));

  // finally add FlView
  g_autoptr(FlDartProject) project = fl_dart_project_new();
  FlView *view = fl_view_new(project);
  gtk_box_pack_start (GTK_BOX (vbox1), GTK_WIDGET(view), TRUE, TRUE, 2);
  gtk_widget_show (GTK_WIDGET (view));

  GtkWindow* window =
  GTK_WINDOW(gtk_application_window_new(GTK_APPLICATION(application)));
  gtk_container_add (GTK_CONTAINER (window), vbox1);

  fl_register_plugins(FL_PLUGIN_REGISTRY(view));
  gtk_widget_grab_focus(GTK_WIDGET(view));

  GtkHeaderBar *header_bar = GTK_HEADER_BAR(gtk_header_bar_new());
  gtk_widget_show(GTK_WIDGET(header_bar));
  gtk_header_bar_set_title(header_bar, "client");
  gtk_header_bar_set_show_close_button(header_bar, TRUE);
  gtk_window_set_titlebar(window, GTK_WIDGET(header_bar));
  gtk_window_set_default_size(window, 1280, 720);

  gtk_widget_show(GTK_WIDGET(window));
}

【讨论】：