Flutter如何自定义桌面开发的最大化最小化图标

在Flutter桌面开发中，如何自定义窗口的最大化和最小化图标？我尝试了一些方法但效果不理想，希望有经验的朋友能分享具体的实现步骤或代码示例。

2 回复

在Flutter桌面开发中，使用window_manager插件自定义最大化、最小化图标。通过WindowManager类设置窗口按钮样式，可修改图标或隐藏默认控件。

更多关于Flutter如何自定义桌面开发的最大化最小化图标的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter桌面应用中，可以通过window_manager包自定义窗口的最大化、最小化图标。以下是具体实现步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  window_manager: ^0.3.0

2. 初始化窗口管理器

在 main() 中初始化：

import 'package:window_manager/window_manager.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await windowManager.ensureInitialized();
  
  WindowOptions windowOptions = WindowOptions(
    titleBarStyle: TitleBarStyle.hidden, // 隐藏默认标题栏
  );
  
  await windowManager.waitUntilReadyToShow(windowOptions, () async {
    await windowManager.show();
    await windowManager.focus();
  });
  
  runApp(MyApp());
}

3. 创建自定义标题栏

class CustomTitleBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 30,
      color: Colors.grey[200],
      child: Row(
        children: [
          Expanded(child: MoveWindow()), // 可拖拽区域
          WindowButtons(), // 自定义按钮
        ],
      ),
    );
  }
}

class WindowButtons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        MinimizeButton(), // 最小化按钮
        MaximizeButton(), // 最大化按钮
        CloseButton(),    // 关闭按钮
      ],
    );
  }
}

4. 实现按钮功能

class MinimizeButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.minimize, size: 16),
      onPressed: () => windowManager.minimize(),
    );
  }
}

class MaximizeButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.crop_square, size: 16), // 最大化图标
      onPressed: () async {
        if (await windowManager.isMaximized()) {
          await windowManager.unmaximize();
        } else {
          await windowManager.maximize();
        }
      },
    );
  }
}

5. 在应用中使用

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            CustomTitleBar(), // 自定义标题栏
            Expanded(
              child: Container(
                child: Text('应用内容'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明：

  1. 使用 TitleBarStyle.hidden 隐藏系统默认标题栏
  2. MoveWindow 组件使标题栏区域可拖拽
  3. 通过 windowManager 控制窗口状态
  4. 可完全自定义按钮样式和布局

这种方法适用于Windows、macOS和Linux平台，可创建完全自定义的窗口控制按钮。

回到顶部