时间戳

首页 > 解决方案 > Flutter-desktop 无框窗口支持

flutter - Flutter-desktop 无框窗口支持

问题描述

刚开始使用颤振，我正在玩 macOS 桌面应用程序。我想知道颤振是否支持无框窗口。例如，在 Electron.js 中，我们可以定义无框窗口，并且我们的应用程序窗口可以具有真正自定义的形状。我们可以根据应用需求等重新创建标题栏。

无框电子应用示例：

在此处输入图像描述

我试图找到有关此功能的任何信息，但没有成功。

这个功能是计划好的，还是我们现在可以在使用 Xcode 的 macOS 上做到这一点？我知道桌面支持处于早期阶段，所以也许很快就会问。

标签： flutterflutter-desktop

解决方案

对于 Windows：

要在 Flutter 中做一个无框窗口，您需要从项目目录/windows/runner/win32_window.cpp文件中更改窗口属性。

首先，找到关于创建窗口的部分。这是 Flutter 的内置代码：

     HWND window = CreateWindow(
       window_class, title.c_str(), WS_OVERLAPPEDWINDOW | WS_VISIBLE,
       Scale(origin.x, scale_factor), Scale(origin.y, scale_factor),
       Scale(size.width, scale_factor), Scale(size.height, scale_factor),
       nullptr, nullptr, GetModuleHandle(nullptr), this);

您只需将WS_OVERLAPPEDWINDOW值更改为WS_POPUPWINDOW即可制作无框窗口。

我们的最终代码将如下所示：

     HWND window = CreateWindow(
       window_class, title.c_str(), WS_POPUPWINDOW | WS_VISIBLE,
       Scale(origin.x, scale_factor), Scale(origin.y, scale_factor),
       Scale(size.width, scale_factor), Scale(size.height, scale_factor),
       nullptr, nullptr, GetModuleHandle(nullptr), this);

请记住，如果您这样做，您将失去拖动窗口的能力。但是有一些解决方案。

编辑（01/03/2022）： 您可以使用WS_THICKFRAME而不是WS_POPUPWINDOW 这对于窗口管理来说更加动态。

对于 macOS：

我发现这篇文章很有帮助 ->中：使用 Flutter 在 macOS 上隐藏标题栏

推荐阅读