Flutter窗口管理插件bitsdojo_window_modify1的使用

Flutter窗口管理插件bitsdojo_window_modify1的使用

概述

bitsdojo_window 是一个用于自定义和操作 Flutter 桌面应用程序窗口的插件。它支持 Windows、macOS 和 Linux 平台。

功能特点:

  • 自定义窗口框架(移除标准的 Windows/macOS/Linux 标题栏和按钮)
  • 启动时隐藏窗口
  • 显示/隐藏窗口
  • 使用 Flutter 小部件移动窗口
  • 最小化/最大化/还原/关闭窗口
  • 设置窗口大小、最小尺寸和最大尺寸
  • 设置窗口位置
  • 设置窗口在屏幕上的对齐方式(居中/左上/右上/左下/右下)
  • 设置窗口标题

开始使用

1. 安装插件

pubspec.yaml 文件中添加以下依赖项:

dependencies:
  bitsdojo_window: ^0.3.1

然后运行 flutter pub get 来安装插件。


Windows 应用程序配置

  1. 打开你的项目目录下的 windows\runner\main.cpp 文件。
  2. 在文件顶部添加以下两行代码:
#include <bitsdojo_window_windows/bitsdojo_window_plugin.h>
auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);

macOS 应用程序配置

  1. 打开你的项目目录下的 macos\runner\MainFlutterWindow.swift 文件。
  2. 在导入 FlutterMacOS 后添加以下一行代码:
import bitsdojo_window_macos
  1. class MainFlutterWindow: NSWindow 修改为 class MainFlutterWindow: BitsdojoWindow
  2. awakeFromNib() 方法之前添加以下方法:
override func bitsdojo_window_configure() -> UInt {
  return BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP
}

Linux 应用程序配置

  1. 打开你的项目目录下的 linux\my_application.cc 文件。
  2. 在文件顶部添加以下代码:
#include <bitsdojo_window_linux/bitsdojo_window_plugin.h>
  1. 查找以下代码块:
gtk_window_set_default_size(window, 1280, 720);
gtk_widget_show(GTK_WIDGET(window));
  1. 将其替换为以下代码:
auto bdw = bitsdojo_window_from(window);            // 添加这一行
bdw->setCustomFrame(true);                          // 添加这一行
// gtk_window_set_default_size(window, 1280, 720);  // 注释掉这一行
gtk_widget_show(GTK_WIDGET(window));

Flutter 应用集成

lib\main.dart 文件中,添加以下代码到 main 函数中:

void main() {
  runApp(const MyApp());

  // 配置窗口
  doWhenWindowReady(() {
    const initialSize = Size(600, 450);
    appWindow.minSize = initialSize;
    appWindow.size = initialSize;
    appWindow.alignment = Alignment.center;
    appWindow.show();
  });
}

示例代码

以下是一个完整的示例代码,展示如何使用 bitsdojo_window 插件创建一个带有自定义标题栏的窗口:

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

void main() {
  runApp(const MyApp());

  // 初始化窗口
  doWhenWindowReady(() {
    final win = appWindow;
    const initialSize = Size(600, 450);
    win.minSize = initialSize;
    win.size = initialSize;
    win.alignment = Alignment.center;
    win.title = "自定义窗口";
    win.show();
  });
}

const borderColor = Color(0xFF805306);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: WindowBorder(
          color: borderColor,
          width: 1,
          child: Row(
            children: const [LeftSide(), RightSide()],
          ),
        ),
      ),
    );
  }
}

const sidebarColor = Color(0xFFF6A00C);

class LeftSide extends StatelessWidget {
  const LeftSide({Key? key}) : super(key: key);
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizedBox(
        width: 200,
        child: Container(
            color: sidebarColor,
            child: Column(
              children: [
                WindowTitleBarBox(child: MoveWindow()),
                Expanded(child: Container())
              ],
            )));
  }
}

const backgroundStartColor = Color(0xFFFFD500);
const backgroundEndColor = Color(0xFFF6A00C);

class RightSide extends StatelessWidget {
  const RightSide({Key? key}) : super(key: key);
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [backgroundStartColor, backgroundEndColor],
              stops: [0.0, 1.0]),
        ),
        child: Column(children: [
          WindowTitleBarBox(
            child: Row(
              children: [Expanded(child: MoveWindow()), const WindowButtons()],
            ),
          )
        ]),
      ),
    );
  }
}

final buttonColors = WindowButtonColors(
    iconNormal: const Color(0xFF805306),
    mouseOver: const Color(0xFFF6A00C),
    mouseDown: const Color(0xFF805306),
    iconMouseOver: const Color(0xFF805306),
    iconMouseDown: const Color(0xFFFFD500));

final closeButtonColors = WindowButtonColors(
    mouseOver: const Color(0xFFD32F2F),
    mouseDown: const Color(0xFFB71C1C),
    iconNormal: const Color(0xFF805306),
    iconMouseOver: Colors.white);

class WindowButtons extends StatefulWidget {
  const WindowButtons({Key? key}) : super(key: key);

  [@override](/user/override)
  _WindowButtonsState createState() => _WindowButtonsState();
}

class _WindowButtonsState extends State<WindowButtons> {
  void maximizeOrRestore() {
    setState(() {
      appWindow.maximizeOrRestore();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Row(
      children: [
        MinimizeWindowButton(colors: buttonColors),
        appWindow.isMaximized
            ? RestoreWindowButton(
                colors: buttonColors,
                onPressed: maximizeOrRestore,
              )
            : MaximizeWindowButton(
                colors: buttonColors,
                onPressed: maximizeOrRestore,
              ),
        CloseWindowButton(colors: closeButtonColors),
      ],
    );
  }
}

更多关于Flutter窗口管理插件bitsdojo_window_modify1的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


bitsdojo_window_modify1 是一个 Flutter 插件,用于在桌面应用程序中自定义窗口管理。它是 bitsdojo_window 的一个修改版本,提供了更多的灵活性和功能。以下是如何使用 bitsdojo_window_modify1 的基本指南。

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 bitsdojo_window_modify1 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  bitsdojo_window_modify1: ^1.0.0 # 请确保使用最新版本

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

2. 初始化插件

在你的 main.dart 文件中,导入插件并初始化它:

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

void main() {
  runApp(MyApp());
  doWhenWindowReady(() {
    final initialSize = Size(800, 600);
    appWindow.minSize = initialSize;
    appWindow.size = initialSize;
    appWindow.alignment = Alignment.center;
    appWindow.show();
  });
}

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

3. 自定义窗口样式

你可以使用 bitsdojo_window_modify1 提供的 API 来自定义窗口的样式,例如设置窗口的标题栏、边框、最小化和最大化按钮等。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          WindowTitleBarBox(
            child: Row(
              children: [
                Expanded(
                  child: MoveWindow(),
                ),
                MinimizeWindowButton(),
                MaximizeWindowButton(),
                CloseWindowButton(),
              ],
            ),
          ),
          Expanded(
            child: Center(
              child: Text('Hello, Bitsdojo Window!'),
            ),
          ),
        ],
      ),
    );
  }
}

4. 处理窗口事件

你可以监听和处理窗口的各种事件,例如窗口大小变化、最小化、最大化等。

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    appWindow.onWindowResized = _onWindowResized;
  }

  void _onWindowResized() {
    print('Window resized to: ${appWindow.size}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          WindowTitleBarBox(
            child: Row(
              children: [
                Expanded(
                  child: MoveWindow(),
                ),
                MinimizeWindowButton(),
                MaximizeWindowButton(),
                CloseWindowButton(),
              ],
            ),
          ),
          Expanded(
            child: Center(
              child: Text('Hello, Bitsdojo Window!'),
            ),
          ),
        ],
      ),
    );
  }
}

5. 其他功能

bitsdojo_window_modify1 还提供了其他一些功能,例如设置窗口的透明度、设置窗口的图标等。你可以查阅插件的文档来了解更多细节。

6. 运行应用

完成上述步骤后,你可以运行你的 Flutter 桌面应用程序,并看到自定义的窗口样式和功能。

flutter run
回到顶部