在Flutter窗口中设置最小/最大屏幕尺寸

Question

我正在开发一个 Windows Flutter 应用程序。该应用程序已经有移动版本，我正在将其转换为 Windows 版本。移动设计已经存在，但现在需要将其转换为 Windows 版本，问题是设计尚未准备好。

因此，我被分配了一个任务，找出如何为应用程序提供最大宽度和高度，以便用户无法使用鼠标更改应用程序屏幕大小。

在 Flutter Windows 上是否有实现这一功能的方法？

- Khamidjon Khamidov

Answer 1

可以做到这一点，而且也避免了由@Khamidjon Khamidov提到的问题。为实现此目标，您需要在3个文件中进行更改：

1. pubspec.yaml
2. main.cpp（位于windows\runner\main.cpp）
3. main.dart

将以下代码添加到您的pubspec.yaml文件中的依赖项下，并保存该文件。

window_size:
    git:
      url: https://github.com/google/flutter-desktop-embedding
      path: plugins/window_size

请更改main.cpp中以下的代码：

Win32Window::Size size(1280, 720);
to
Win32Window::Size size(min_width, min_height)

上面的代码将确保您的应用程序以首选大小启动。将min_width和min_height替换为您的最小或最大值对之一。 修改您的main.dart如下所示：

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  if (Platform.isWindows || Platform.isLinux || Platform.isMacOS) {
    setWindowTitle('My App');
    setWindowMaxSize(const Size(max_width, max_height));
    setWindowMinSize(const Size(min_width, min_height));
  }

  runApp(const MyApp());
}

使用您喜欢的值替换 max_width、max_height、min_width 和 min_height。

注意： 如果您想要一个不可调整大小的表单，请使用相同的最小和最大值。

- Timotheux

---

更新： 自2022年3月15日起，端口9418上的git://协议不再受支持。 您可以使用https://协议访问https://github.com/google/flutter-desktop-embedding.git。 - KAnggara75

Answer 2

你可以使用这个插件来添加控制窗口实例的功能。 安装方式 将以下内容添加到你的pubspec.yaml文件中：

dependencies:
  window_manager: ^0.2.7

用法

在你的main()方法中添加以下内容：

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await windowManager.ensureInitialized();
  if (Platform.isWindows) {
    WindowManager.instance.setMinimumSize(const Size(1200, 600));
    WindowManager.instance.setMaximumSize(const Size(1200, 600));
  }
  runApp(MyApp());
}    

请将1200和600替换为您偏好的尺寸。

- Abdulrahman Osama

---

干得不错！谢谢。 - Omprakash Gautam

导入的包有：import 'dart:io'; 和 import 'package:window_manager/window_manager.dart'; - undefined

Answer 3

方法1

如@Stefano所提到的，我可以使用这个库：

dependencies:
  window_size:
    git:
      url: git://github.com/google/flutter-desktop-embedding.git
      path: plugins/window_size

.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:window_size/window_size.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  if (Platform.isWindows) {
    setWindowMaxSize(const Size(1024, 768));
    setWindowMinSize(const Size(512, 384));
    Future<Null>.delayed(Duration(seconds: 1), () {
        setWindowFrame(Rect.fromCenter(center: Offset(1000, 500), width: 600, height: 1000));
    });
  }
  runApp(MyApp());
}

问题在于窗口大小被设置为默认值，因此在几秒钟后更改其大小。

方法2

由于第一种方法未按照我预期的那样工作，所以我混合了两种方法：

在main.dart中：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  if (Platform.isWindows) {
    setWindowMaxSize(const Size(1024, 768));
    setWindowMinSize(const Size(512, 384));
  }
  runApp(MyApp());
}

在“lib/windows/runner/win32_window.cpp”文件中： // 这个方法已经存在于文件中 bool Win32Window::CreateAndShow(const std::wstring& title, const Point& origin, const Size& size) { Destroy();

  const wchar_t* window_class =
      WindowClassRegistrar::GetInstance()->GetWindowClass();

  const POINT target_point = {static_cast<LONG>(/*x // change here to move to center*/ 550),  // before -> origin.x
                              static_cast<LONG>(/*y // change here to move vertically*/ origin.y)}; // before -> origin.y
  HMONITOR monitor = MonitorFromPoint(target_point, MONITOR_DEFAULTTONEAREST);
  UINT dpi = FlutterDesktopGetDpiForMonitor(monitor);
  double scale_factor = dpi / 96.0;

  HWND window = CreateWindow(
      window_class, title.c_str(), WS_OVERLAPPEDWINDOW | WS_VISIBLE,
      Scale(/* x // move to center */ 550, scale_factor), Scale(/* y // move screen vertically */ origin.y, scale_factor),// before -> origin.x, origin.y
      Scale(/* width  // set default width */ 450, scale_factor), Scale(/* height // set default height */ 800, scale_factor), // before -> size.width, size.height
      nullptr, nullptr, GetModuleHandle(nullptr), this);

  if (!window) {
    return false;
  }

  return OnCreate();
}

- Khamidjon Khamidov

Answer 4

是的，我们可以使用 window_size 包来限制 Windows Flutter 应用程序的大小。

要在我们的应用程序中使用它，我们需要将其添加到我们的 pubspec.yaml 依赖项中：

dependencies:
  flutter:
    sdk: flutter
  window_size:
    git:
      url: git://github.com/google/flutter-desktop-embedding.git
      path: plugins/window_size

以下是在初始化时使用它的方法：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:window_size/window_size.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  if (Platform.isWindows) {
    setWindowMaxSize(const Size(1024, 768));
    setWindowMinSize(const Size(512, 384));
  }
  runApp(MyApp());
}

- Stefano Amorelli

---

但是，最初屏幕变得更大了（没有变成我设置的最小/最大值）。只有在我尝试调整大小后才会发生变化。 - Khamidjon Khamidov

Answer 5

[更新] 上述解决方案已过时并会引发错误。

根据Flutter团队的官方文档，支持Windows UI指南部分提供了最新的解决方案。

根据此文档，使用pub.dev上的bitsdojo_window插件来设置窗口大小、最小大小、最大大小、位置等。

安装此插件时可能会遇到1或2个错误。要解决这个问题，请查看完整的解决方案。

- MD. Saffan Alvy

Answer 6

您可以使用类似于这样的方法，无需额外的软件包。以下是设置最小窗口大小的示例：

await MethodChannel('desktop_window').invokeMethod('setMinWindowSize', {'width': 500, 'height': 800});

- Sunil Gupta

---

答案需要更多细节说明在哪里调用它 - 例如，在main方法中的runApp之前添加它会抛出异常。 - Clay H