Flutter窗口大小调整插件window

Flutter窗口大小调整插件window_size的使用

该插件允许调整包含Flutter内容的窗口大小，并重新定位窗口，还可以查询屏幕信息。

这是一个原型插件，从长远来看，预计将被Flutter框架内的功能所取代。

范围

目前没有计划为该插件添加新的功能，例如窗口最小化和最大化。该插件的目标是：

解除某些核心用例的限制，以支持非常早期的采用者；
在桌面插件API的早期开发期间验证Flutter本身的插件API。

现在这些目标已经实现，并且插件API已经稳定，任何人都可以创建和发布桌面Flutter插件。如果某个功能可以解除一个顶级客户的限制，可能会在此处添加新功能。社区被鼓励创建自己的插件来实现其他窗口操作功能。

支持平台

✅ macOS
✅ Windows
✅ Linux

并非所有操作在所有平台上都已实现，但调整大小和重新定位的核心功能在三个平台上都是可用的。

使用方法

参见插件README文件以获取有关使用FDE插件的一般说明。

Linux

需要GTK 3.22或更高版本。

完整示例Demo

以下是一个完整的示例，展示了如何使用window_size插件调整窗口大小并重新定位窗口。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 设置窗口初始位置和大小
  setWindowTitle('Resizable Window');
  setWindowMinSize(const Size(800, 600));
  setWindowMaxSize(const Size(1920, 1080));
  setWindowContentSize(const Size(1280, 720));

  // 设置窗口位置（相对于屏幕左上角）
  setWindowPosition(
    Offset(
      (window.physicalScreen.size.width - window.contentRect.size.width) / 2,
      (window.physicalScreen.size.height - window.contentRect.size.height) / 2,
    ),
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Resizable Window'),
        ),
        body: Center(
          child: Text('Resize me!'),
        ),
      ),
    );
  }
}

代码解释

导入必要的库：

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

初始化绑定：
```
void main() {
  WidgetsFlutterBinding.ensureInitialized();
```
这一步确保了Dart和Flutter的绑定已经初始化。
设置窗口标题：
```
setWindowTitle('Resizable Window');
```
设置窗口标题为’Resizable Window’。
设置窗口最小和最大尺寸：
```
setWindowMinSize(const Size(800, 600));
setWindowMaxSize(const Size(1920, 1080));
```
设置窗口最小尺寸为800x600，最大尺寸为1920x1080。
设置窗口初始大小：
```
setWindowContentSize(const Size(1280, 720));
```
设置窗口初始大小为1280x720。

设置窗口位置：

setWindowPosition(
  Offset(
    (window.physicalScreen.size.width - window.contentRect.size.width) / 2,
    (window.physicalScreen.size.height - window.contentRect.size.height) / 2,
  ),
);

将窗口居中显示在屏幕上。

运行应用：
```
runApp(MyApp());
```

更多关于Flutter窗口大小调整插件window_size的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼•2 个月前

更多关于Flutter窗口大小调整插件window_size的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用window_size插件来调整窗口大小的代码示例。这个插件主要用于桌面平台（如Windows、macOS和Linux）。

首先，确保你已经在pubspec.yaml文件中添加了window_size依赖：

dependencies:
  flutter:
    sdk: flutter
  window_size: ^0.1.5  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你需要在你的Flutter项目中进行一些配置和代码编写。以下是一个完整的示例：

主入口文件（main.dart）：

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

void main() {
  // 初始化窗口大小设置
  setWindowSizeOnStartup(const Size(1200, 800));

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Window Size Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Size? currentWindowSize;

  @override
  void initState() {
    super.initState();
    // 获取当前窗口大小
    getWindowSize().then((size) {
      setState(() {
        currentWindowSize = size;
      });
    });
  }

  void _setWindowSize(double width, double height) async {
    setWindowSize(Size(width, height));
    // 更新当前窗口大小状态
    setState(() {
      currentWindowSize = Size(width, height);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Window Size Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Window Size:',
              style: TextStyle(fontSize: 20),
            ),
            if (currentWindowSize != null)
              Text(
                '${currentWindowSize!.width} x ${currentWindowSize!.height}',
                style: TextStyle(fontSize: 20),
              ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _setWindowSize(800, 600),
              child: Text('Set Window Size to 800x600'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () => _setWindowSize(1024, 768),
              child: Text('Set Window Size to 1024x768'),
            ),
          ],
        ),
      ),
    );
  }
}

在桌面平台上运行：

确保你在桌面平台上运行此应用，因为window_size插件仅在桌面平台上有效。你可以使用flutter run -d windows或flutter run -d macos（取决于你的操作系统）来运行应用。

注意事项

setWindowSizeOnStartup函数用于在应用程序启动时设置窗口大小。
getWindowSize函数用于获取当前窗口大小。
setWindowSize函数用于在运行时动态调整窗口大小。

这个示例展示了如何在Flutter应用中调整窗口大小，并通过UI按钮进行动态调整。希望这个示例对你有所帮助！