Flutter框架高阶——Window应用程序设置窗体窗口背景完全透明

文章目录

    • 1.修改 main.cpp
      • 1）C++ 与 Win32 API
      • 2）EnableTransparency()
      • 3）中文注释
    • 2.编写 Flutter 代码
      • 1）bitsdojo_window
      • 2）window_manager
      • 3）区别对比
      • 4）同时使用
        • （1）设置初始化代码
        • （2）处理冲突和集成

Flutter的文件结构如下，找到图中的main.cpp的文件
在这里插入图片描述

1.修改 main.cpp

main.cpp文件中的代码应该和下面差不多：

#include <flutter/dart_project.h>
#include <flutter/flutter_view_controller.h>
#include <windows.h>#include "flutter_window.h"
#include "utils.h"int APIENTRY wWinMain(_In_ HINSTANCE instance, _In_opt_ HINSTANCE prev,_In_ wchar_t *command_line, _In_ int show_command) {// Attach to console when present (e.g., 'flutter run') or create a// new console when running with a debugger.if (!::AttachConsole(ATTACH_PARENT_PROCESS) && ::IsDebuggerPresent()) {CreateAndAttachConsole();}// Initialize COM, so that it is available for use in the library and/or// plugins.::CoInitializeEx(nullptr, COINIT_APARTMENTTHREADED);flutter::DartProject project(L"data");std::vector<std::string> command_line_arguments =GetCommandLineArguments();project.set_dart_entrypoint_arguments(std::move(command_line_arguments));FlutterWindow window(project);Win32Window::Point origin(10, 10);Win32Window::Size size(1280, 720);if (!window.Create(L"untitled", origin, size)) {return EXIT_FAILURE;}window.SetQuitOnClose(true);::MSG msg;while (::GetMessage(&msg, nullptr, 0, 0)) {::TranslateMessage(&msg);::DispatchMessage(&msg);}::CoUninitialize();return EXIT_SUCCESS;
}

1）C++ 与 Win32 API

由上面的代码不难看出flutter的window应用程序使用的是C++语言，通过 Win32 API 与 Windows 操作系统进行交互实现。所以让窗口变得透明，对窗口的背景颜色进行设置，并启用层叠窗口样式。就要在main.cpp文件中做一些更改：

  • 在创建窗口时，设置窗口的样式为层叠窗口。
  • 使用SetLayeredWindowAttributes函数设置窗口透明度。
#include <flutter/dart_project.h>
// 省略代码...
#include "utils.h"// 下面是新加的代码---------------------------------------------------------
#include<bitsdojo_window_windows/bitsdojo_window_plugin.h>
auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);void EnableTransparency(HWND hwnd) {SetWindowLong(hwnd, GWL_EXSTYLE, GetWindowLong(hwnd, GWL_EXSTYLE) | WS_EX_LAYERED);COLORREF colorKey = RGB(255, 255, 255); BYTE alpha = 0;SetLayeredWindowAttributes(hwnd, colorKey, alpha, LWA_ALPHA);
} 
// 到这里结束---------------------------------------------------------------int APIENTRY wWinMain(_In_ HINSTANCE instance, _In_opt_ HINSTANCE prev,                      _In_ wchar_t *command_line, _In_ int show_command) {// 省略代码...if (!window.Create(L"untitled", origin, size)) {return EXIT_FAILURE;}// 下面是新加的代码------------------------------------------------------EnableTransparency(window.GetHandle());     // 到这里结束-----------------------------------------------------------window.SetQuitOnClose(true);// 省略代码...return EXIT_SUCCESS;
}

2）EnableTransparency()

// 启用透明度的函数
void EnableTransparency(HWND hwnd) {// 设置窗口样式为分层SetWindowLong(hwnd, GWL_EXSTYLE, GetWindowLong(hwnd, GWL_EXSTYLE) | WS_EX_LAYERED);// 设置透明色和alphaCOLORREF colorKey = RGB(255, 255, 255); // The color to make transparent// 透明程度：透明度水平(0 - 255,0完全透明,255完全不透明)BYTE alpha = 0;SetLayeredWindowAttributes(hwnd, colorKey, alpha, LWA_ALPHA);
}

EnableTransparency函数：这是一个新的函数，函数名随意，它接收窗口句柄作为参数，并设置窗口为层叠样式（WS_EX_LAYERED），然后通过SetLayeredWindowAttributes函数设置窗口的透明度。这里的透明度由alpha参数决定，取值范围是0到255，其中0表示完全透明，255表示完全不透明。

EnableTransparency(window.GetHandle());

window.Create之后调用EnableTransparency：在创建窗口之后，我们调用EnableTransparency函数并传递窗口句柄，以使窗口透明。

GetHandle函数属于Win32Window类，它返回后台窗口句柄，使客户端能够设置图标和其他窗口属性。如果窗口已被销毁，则返回nullptr。

3）中文注释

使用Android Studio在main.cpp文件中使用中文注释容易报文件编码的错误，在文件中指定编码格式或者在编辑器中修改编码格式都能解决，不过不用中文注释应该是最简单直接的做法。

// 错误信息示例
P:\FlutterProject\flutter_clock-master\untitled\windows\runner\main.cpp(1,1): error C2220: 以下警告被视为错误 [P:\FlutterProject\flutter_clock-master\untitled\build\windows\x64\runner\untitled.vcxproj]
P:\FlutterProject\flutter_clock-master\untitled\windows\runner\main.cpp(1,1): warning C4819: 该文件包含不能在当前代码页(936)中表示的字符。请将该文件保存为 Unicode 格式以防止数据丢失 [P:\FlutterProject\flutter_clock-master\untitled\build\windows\x64\runner\untitled.vcxproj]
Exception: Build process failed.

2.编写 Flutter 代码

网上有两个包bitsdojo_window和window_manager进行Flutter的window应用程序编程，bitsdojo_window 和 window_manager 是两个用于 Flutter 桌面应用开发的包，咱们已经修改了main.cpp，只要在组件中设置背景即可，这两个包都能实现，下面列出bitsdojo_window的实现：

import 'package:flutter/material.dart';
import 'package:bitsdojo_window/bitsdojo_window.dart';void main() {runApp(const MyApp());doWhenWindowReady(() {appWindow.show();});
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(color: Colors.transparent,theme: ThemeData(// 设置窗口的背景颜色scaffoldBackgroundColor: Colors.transparent,),home: Container(color: Colors.transparent),);}
}

上面几乎把存在的组件都设置成了transparent，所以现在窗口的透明与否完全由组件说了算，两个包只要写一条让窗体显示的代码（如上面的 appWindow.show();）即可。既然提到这两个包，这里说明一下它们两个的区别：

1）bitsdojo_window

功能：

  1. 自定义窗口边框：允许开发者自定义窗口的边框和标题栏，可以实现无边框窗口并完全控制窗口的外观和行为。
  2. 窗口拖动：提供简单的 API 用于实现自定义标题栏的拖动。
  3. 窗口按钮：允许自定义最小化、最大化和关闭按钮的行为。
  4. 窗口透明度：支持设置窗口的透明度。
  5. 多平台支持：支持 Windows、macOS 和 Linux。

典型用例：

  • 需要高度自定义窗口外观和行为的应用。
  • 希望实现无边框窗口并自行处理窗口标题栏和按钮。

示例代码：

import 'package:bitsdojo_window/bitsdojo_window.dart';void main() {runApp(MyApp());// Initialize bitsdojo_windowdoWhenWindowReady(() {final initialSize = Size(600, 450);appWindow.minSize = initialSize;appWindow.size = initialSize;appWindow.alignment = Alignment.center;appWindow.show();});
}

2）window_manager

功能：

  1. 窗口管理：提供多种窗口管理功能，包括窗口最小化、最大化、恢复、隐藏、显示等。
  2. 窗口信息：可以获取窗口的位置、大小、标题等信息。
  3. 窗口事件：支持窗口的各种事件监听，如窗口关闭、聚焦、失焦等事件。
  4. 多平台支持：支持 Windows、macOS 和 Linux。

典型用例：

  • 需要对窗口进行全面控制和管理的应用。
  • 需要监听窗口事件或获取窗口状态信息的应用。

示例代码：

import 'package:window_manager/window_manager.dart';void main() async {WidgetsFlutterBinding.ensureInitialized();await windowManager.ensureInitialized();WindowOptions windowOptions = WindowOptions(size: Size(800, 600),center: true,title: 'My Flutter App',);windowManager.waitUntilReadyToShow(windowOptions, () async {await windowManager.show();await windowManager.focus();});runApp(MyApp());
}

3）区别对比

  • bitsdojo_window：侧重于窗口外观的高度自定义，特别是无边框窗口的实现和自定义窗口控制按钮。
  • window_manager：提供全面的窗口管理功能，适合需要对窗口进行各种操作和事件处理的应用。

选择哪个包取决于你的具体需求：如果你需要自定义窗口的外观和行为，bitsdojo_window 是一个很好的选择；如果你需要全面的窗口管理功能，window_manager 可能更适合你。

4）同时使用

当然有大聪明就想了，我都用可不可以呢？在同一个 Flutter 项目中同时使用 bitsdojo_window 和 window_manager 当然是可以的，但需要注意它们可能在某些功能上存在冲突或重叠，因此需要谨慎管理。方法如下，仅供参考：

（1）设置初始化代码

在 main.dart 文件中初始化 bitsdojo_window 和 window_manager，确保它们不互相干扰：

import 'package:flutter/material.dart';
import 'package:bitsdojo_window/bitsdojo_window.dart';
import 'package:window_manager/window_manager.dart';void main() async {WidgetsFlutterBinding.ensureInitialized();// Initialize window_managerawait windowManager.ensureInitialized();WindowOptions windowOptions = WindowOptions(size: Size(800, 600),center: true,title: 'My Flutter App',);windowManager.waitUntilReadyToShow(windowOptions, () async {await windowManager.show();await windowManager.focus();});runApp(MyApp());// Initialize bitsdojo_windowdoWhenWindowReady(() {final initialSize = Size(800, 600);appWindow.minSize = initialSize;appWindow.size = initialSize;appWindow.alignment = Alignment.center;appWindow.show();});
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Demo Home Page'),),body: WindowBorder(color: Colors.black,width: 1,child: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),],),),),);}
}
（2）处理冲突和集成

在整合过程中，注意以下几点：

  1. 窗口初始化：确保 window_manager 和 bitsdojo_window 的初始化代码不互相干扰。window_manager 用于窗口管理，bitsdojo_window 用于自定义窗口外观。
  2. 窗口事件：如果需要监听窗口事件，如最小化、最大化等，优先使用 window_manager 提供的事件处理机制。
  3. 自定义边框和按钮：使用 bitsdojo_window 自定义窗口边框和按钮时，确保这些自定义不会影响 window_manager 的功能。

以下是一个实现透明窗口并管理窗口事件的示例：

import 'package:flutter/material.dart';
import 'package:bitsdojo_window/bitsdojo_window.dart';
import 'package:window_manager/window_manager.dart';void main() async {WidgetsFlutterBinding.ensureInitialized();// Initialize window_managerawait windowManager.ensureInitialized();WindowOptions windowOptions = WindowOptions(size: Size(800, 600),center: true,title: 'My Flutter App',);windowManager.waitUntilReadyToShow(windowOptions, () async {await windowManager.show();await windowManager.focus();});runApp(MyApp());// Initialize bitsdojo_windowdoWhenWindowReady(() {final initialSize = Size(800, 600);appWindow.minSize = initialSize;appWindow.size = initialSize;appWindow.alignment = Alignment.center;// Set the window to be transparentappWindow.setEffect(effect: WindowEffect.transparent,color: Colors.transparent,);appWindow.show();});
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Demo Home Page'),),body: WindowBorder(color: Colors.black,width: 1,child: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),],),),),);}
}

如果觉得文章写的不错，就随手点个赞再走吧！😊

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/358060.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于matlab的SVR回归预测

基于matlab的SVR回归预测

1 原理 SVR&#xff08;Support Vector Regression&#xff09;回归预测原理&#xff0c;基于支持向量机&#xff08;SVM&#xff09;的回归分支&#xff0c;其核心思想是通过寻找一个最优的超平面来进行回归预测&#xff0c;并处理非线性回归问题。以下是SVR回归预测原理的系统…
阅读更多...
SQL注入-sqlmap使用

SQL注入-sqlmap使用

sqlmap简介 一款自动化的SQL注入工具&#xff0c;其主要功能是扫描&#xff0c;发现并利用给定的URL的SQL注入漏洞&#xff0c;目前支持的数据库是MySQL, Oracle, PostgreSQL, Microsoft SQL Server, Microsoft Access, IBM DB2, SQLite, Firebird, Sybase和SAP MaxDB Sqlma…
阅读更多...
Ps：创建数据驱动的图形 - 定义变量

Ps：创建数据驱动的图形 - 定义变量

Ps菜单&#xff1a;图像/变量/定义 Image/Variables/Define 在 Photoshop 中&#xff0c;变量 Variables可用于控制图层的显示或隐藏、替换文字图层的文本内容以及替换像素图层的图像&#xff0c;从而基于数据驱动生成大量变体图像。 在打开的“变量”对话框中&#xff0c;首先…
阅读更多...
爱心商城管理系统的设计

爱心商城管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;企业管理&#xff0c;用户管理&#xff0c;论坛管理&#xff0c;商品管理&#xff0c;公告管理&#xff0c;用户捐赠 企业账户功能包括&#xff1a;系统首页&#xff0c;个人中…
阅读更多...
C语言 | Leetcode C语言题解之第179题最大数

C语言 | Leetcode C语言题解之第179题最大数

题目&#xff1a; 题解&#xff1a; long cmp(int *x, int *y) {unsigned long sx 10, sy 10;while (sx < *x) {sx * 10;}while (sy < *y) {sy * 10;}return sx * (*y) (*x) - sy * (*x) - (*y); }char *largestNumber(int *nums, int numsSize) {qsort(nums, numsSi…
阅读更多...
Hi3861 OpenHarmony嵌入式应用入门--0.96寸液晶屏 iic驱动ssd1306

Hi3861 OpenHarmony嵌入式应用入门--0.96寸液晶屏 iic驱动ssd1306

使用iic驱动ssd1306&#xff0c;代码来源hihope\hispark_pegasus\demo\12_ssd1306 本样例提供了一个HarmonyOS IoT硬件接口的SSD1306 OLED屏驱动库&#xff0c;其功能如下&#xff1a; 内置了128*64 bit的内存缓冲区&#xff0c;支持全屏刷新;优化了屏幕刷新速率&#xff0c;…
阅读更多...
JDK动态代理

JDK动态代理

JDK动态代理源码分析 4.1 JDK动态代理的实现 需要动态代理的接口 /**需要动态代理的接口 */ public interface Movie {void player();void speak();需要动态代理的接口的真实实现 /**需要动态代理接口的真实实现 */ public class RealMovie implements Movie {Override publi…
阅读更多...
HTTP/2 协议学习

HTTP/2 协议学习

HTTP/2 协议介绍 ​ HTTP/2 &#xff08;原名HTTP/2.0&#xff09;即超文本传输协议 2.0&#xff0c;是下一代HTTP协议。是由互联网工程任务组&#xff08;IETF&#xff09;的Hypertext Transfer Protocol Bis (httpbis)工作小组进行开发。是自1999年http1.1发布后的首个更新。…
阅读更多...
Pytest和Unitest框架对比

Pytest和Unitest框架对比

在学到自动化的时候,很多同学都遇到了Pytest和Unitest框架,有的人是两个都学,但是学的不精只是知道分别怎么用.不了解两个区别是什么.有的是犹豫到底要学习那个框架.其实要做好自动化测试,是有必要了解不同框架之间的差异化的. Pytest 特点: Pytest采用了更简洁、更灵活的语法…
阅读更多...
数据清洗！即插即用！异常值、缺失值、离群值处理、残差分析和孤立森林异常检测，确保数据清洗的全面性和准确性，MATLAB程序！

数据清洗！即插即用！异常值、缺失值、离群值处理、残差分析和孤立森林异常检测，确保数据清洗的全面性和准确性，MATLAB程序！

适用平台&#xff1a;Matlab2021版及以上 数据清洗是数据处理和分析中的一个关键步骤&#xff0c;特别是对于像风电场这样的大型、复杂数据集。清洗数据的目的是为了确保数据的准确性、一致性和完整性&#xff0c;从而提高数据分析的质量和可信度&#xff0c;是深度学习训练和…
阅读更多...
BUCK电路布线规则、EMI分析

BUCK电路布线规则、EMI分析

电源系列文章目录 本系列文章为博主在学习工作过程中的心得记录&#xff0c;欢迎评论区交流讨论。 BUCK电路工作原理、参数计算及工作模式分析BUCK电路布线规则、EMI分析电源电路中肖特基、续流二极管要求 目录 电源系列文章目录一、PCB布线规则1、输入电感与肖特基摆放2、输…
阅读更多...
云原生容器技术入门：Docker、K8s技术的基本原理和用途

云原生容器技术入门：Docker、K8s技术的基本原理和用途

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、容器技术概述 1、什么是容器技术 2、容器技术的历史与发展 3…
阅读更多...
QT事件处理系统之二：窗口部件的事件拦截，以及事件的传递顺序

QT事件处理系统之二：窗口部件的事件拦截，以及事件的传递顺序

1、案例说明 在父窗口中为selfLineEdit窗口安装事件过滤器，这样我们可以在父窗口中首先拦截来自于selfLineEdit本身产生的事件，并且决定该事件最终是否继续传递到selfLineEdit窗口本身。 2、关键代码 selfLineEdit.cpp #include "selfLineEdit.h" #include &l…
阅读更多...
【树形dp 换根法 BFS】2581. 统计可能的树根数目

【树形dp 换根法 BFS】2581. 统计可能的树根数目

本文涉及知识点 CBFS算法 动态规划汇总 图论知识汇总 树形dp 换根法 BFS LeetCode 2581. 统计可能的树根数目 Alice 有一棵 n 个节点的树&#xff0c;节点编号为 0 到 n - 1 。树用一个长度为 n - 1 的二维整数数组 edges 表示&#xff0c;其中 edges[i] [ai, bi] &#xf…
阅读更多...
将知乎专栏文章转换为 Markdown 文件保存到本地

将知乎专栏文章转换为 Markdown 文件保存到本地

一、参考内容 参考知乎文章代码 | 将知乎专栏文章转换为 Markdown 文件保存到本地&#xff0c;利用代码为GitHub&#xff1a;https://github.com/chenluda/zhihu-download。 二、步骤 1.首先安装包flask、flask-cors、markdownify 2. 运行app.py 3.在浏览器中打开链接&…
阅读更多...
嵌入式学习——数据结构（哈希、排序）——day50

嵌入式学习——数据结构（哈希、排序）——day50

1. 查找二叉树、搜索二叉树、平衡二叉树 2. 哈希表——人的身份证——哈希函数 3. 哈希冲突、哈希矛盾 4. 哈希代码 4.1 创建哈希表 4.2 5. 算法设计 5.1 正确性 5.2 可读性&#xff08;高内聚、低耦合&#xff09; 5.3 健壮性 5.4 高效率&#xff08;时间复杂度&am…
阅读更多...
Visual Studio开发环境搭建

Visual Studio开发环境搭建

原文&#xff1a;https://blog.c12th.cn/archives/25.html Visual Studio开发环境搭建 测试&#xff1a;笔记本原装操作系统&#xff1a;Windows 10 家庭中文版 资源分享链接&#xff1a;提取码&#xff1a;qbt2 注意事项&#xff1a;注意查看本地硬盘是否够用&#xff0c;建议…
阅读更多...
2. 数据结构分析即索引库的crud

2. 数据结构分析即索引库的crud

1. 数据库脚本 DROP TABLE IF EXISTS tb_hotel; CREATE TABLE tb_hotel (id bigint(0) NOT NULL,name varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT COMMENT 酒店名称,address varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_090…
阅读更多...
运营管理和服务支撑阶段

运营管理和服务支撑阶段

我前面的所有设备都部署好了&#xff0c;现在就需要运营管理和服务支撑 遇到问题了迅速解决&#xff0c;避免风险扩大 我们也可以给客户提供上面的服务&#xff0c;提高客户的预警能力&#xff0c;安全风险处理能力 我们不仅提供设备&#xff0c;还提供服务 我们公司成立了安…
阅读更多...
【算法专题--链表】两两交换链表中的节点 -- 高频面试题（图文详解，小白一看就懂！！！）

【算法专题--链表】两两交换链表中的节点 -- 高频面试题（图文详解，小白一看就懂！！！）

目录 一、前言 二、题目描述 三、解题方法 ⭐双指针 -- 采用哨兵位头节点 &#x1f95d; 什么是哨兵位头节点&#xff1f; &#x1f34d; 解题思路 &#x1f34d; 案例图解 四、总结与提炼 五、共勉 一、前言 两两交换链表中的节点 这道题&#xff0c;可以说…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023