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);
    // 设置透明色和alpha
    COLORREF 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});

  @override
  Widget 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_window
  doWhenWindowReady(() {
    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_manager
  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());

  // Initialize bitsdojo_window
  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(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget 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_manager
  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());

  // Initialize bitsdojo_window
  doWhenWindowReady(() {
    final initialSize = Size(800, 600);
    appWindow.minSize = initialSize;
    appWindow.size = initialSize;
    appWindow.alignment = Alignment.center;

    // Set the window to be transparent
    appWindow.setEffect(
      effect: WindowEffect.transparent,
      color: Colors.transparent,
    );

    appWindow.show();
  });
}

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

class MyHomePage extends StatelessWidget {
  @override
  Widget 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:',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

全球AI视频技术竞赛加速：Runway即将推出更优更快的第三代AI视频模型｜TodayAI

全球AI视频技术竞赛加速：Runway即将推出更优更快的第三代AI视频模型｜TodayAI

Runway即将在未来几天推出其更优更快的第三代AI视频模型&#xff0c;这是新一代模型中最小的一个。据公司透露&#xff0c;这款名为Gen-3的模型将带来“在真实度、一致性和动态效果上的重大提升”&#xff0c;同时在速度上也有显著的加快。 去年六月&#xff0c;Runway首次推出…
阅读更多...
【每日刷题】Day70

【每日刷题】Day70

【每日刷题】Day70 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 922. 按奇偶排序数组 II - 力扣&#xff08;LeetCode&#xff09; 2. 905. 按奇偶排序数组 - 力扣&…
阅读更多...
数据库 | 试卷三

数据库 | 试卷三

1.数据库的网状模型应满足的条件是&#xff08; &#xff09; A&#xff0e;允许一个以上结点无双亲&#xff0c;也允许一个结点有多个双亲 B&#xff0e;必须有两个以上的结点 C&#xff0e;有且仅有一个结点无双亲&#xff0c;其余结点都只有一个双亲 D&#xff0e;每个结…
阅读更多...
模拟原神圣遗物系统-小森设计项目，需求分析

模拟原神圣遗物系统-小森设计项目，需求分析

需求分析 我操控某个角色的圣遗物时发现&#xff0c;一开始玩啥也不懂慢慢了解&#xff0c;今天才想起要不做一个 &#xff0c;然后开始想需求 跟Ai聊技术 聊着聊着 发现圣遗物 这个东西有点意思 本来今天打算写一下数据库 的外键想起了一些高兴的事情&#xff08;美人鱼&#…
阅读更多...
数字孪生技术及其广泛应用场景探讨

数字孪生技术及其广泛应用场景探讨

通过将实际物理世界中的物体或系统建模、模拟和分析&#xff0c;数字孪生技术可以提供更精确、更可靠、更高效的解决方案。数字孪生技术在智能制造、城市建设、智慧物流等众多领域中得到了广泛的应用。 通过将数据可视化呈现在虚拟环境中&#xff0c;我们可以更清晰地观察和理…
阅读更多...
搜索引擎数据库介绍

搜索引擎数据库介绍

搜索引擎数据库的定义 搜索引擎数据库是一类专门用于数据内容搜索的NoSQL数据库&#xff0c;是非结构化大数据处理分析领域中重要的角色。搜索引擎数据库使用索引对数据中的相似特征进行归类&#xff0c;并提高搜索能力。通过对索引和检索过程的优化&#xff0c;以处理大量文本…
阅读更多...
安装vue时候发现npm淘宝镜像不能使用，报出：npm.taobao.org和registry.npm.taobao.or

安装vue时候发现npm淘宝镜像不能使用，报出：npm.taobao.org和registry.npm.taobao.or

2024.3.12 安装vue时候发现npm淘宝镜像不能使用&#xff0c;需要重新更换源&#xff0c;简单来说就是更换镜像 使用 npm config get registry 查看当前的镜像&#xff1b; npm config get registry 使用npm config set registry http://mirrors.cloud.tencent.com/npm/ &…
阅读更多...
【GD32F303红枫派使用手册】第二十节 SPI-SPI NAND FLASH读写实验

【GD32F303红枫派使用手册】第二十节 SPI-SPI NAND FLASH读写实验

20.1 实验内容 通过本实验主要学习以下内容&#xff1a; SPI通信协议&#xff0c;参考19.2.1东方红开发板使用手册 GD32F303 SPI操作方式&#xff0c;参考19.2.2东方红开发板使用手册 NAND FLASH基本原理 SPI NAND介绍 使用GD32F303 SPI接口实现对GD5F1GQ5UEYIGY的读写…
阅读更多...
VB从右向左移动的Label

VB从右向左移动的Label

Label的ForeColor设置成红色&#xff0c;BackColor设置成Transparent. Public Class Form1Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.TickLabel1.Left Label1.Left - 100If Label1.Left Label1.Width < 0 ThenLabel1.Left WidthEnd If…
阅读更多...
Tailwindcss 提取组件

Tailwindcss 提取组件

背景 随着项目的发展&#xff0c;您不可避免地会发现自己需要重复使用常用样式&#xff0c;以便在许多不同的地方重新创建相同的组件。这在小组件&#xff08;如按钮、表单元素、徽章等&#xff09;中最为明显。在我的项目中是图表标题样式如下&#xff1a; <div class&qu…
阅读更多...
工业园安全生产新保障：广东地区加强可燃气体报警器校准检测

工业园安全生产新保障：广东地区加强可燃气体报警器校准检测

广东&#xff0c;作为我国经济的重要引擎&#xff0c;拥有众多工业园区。 这些工业园区中&#xff0c;涉及化工、制药、机械制造等多个领域&#xff0c;每天都会产生和使用大量的可燃气体。因此&#xff0c;可燃气体报警器的安装与校准检测&#xff0c;对于保障工业园区的安全…
阅读更多...
从手动到智能：电子行业PLM安规管理的转型之旅

从手动到智能：电子行业PLM安规管理的转型之旅

随着科技的飞速发展&#xff0c;电子产品已经成为我们生活中不可或缺的一部分。然而&#xff0c;这些产品在给人们带来便利的同时&#xff0c;也可能带来触电、火灾、有害辐射等安全隐患。为了保护消费者的生命财产安全&#xff0c;国家对电子产品实施了严格的安全标准&#xf…
阅读更多...
【SpringCloud】负载均衡(Spring Cloud LoadBalancer)

【SpringCloud】负载均衡(Spring Cloud LoadBalancer)

负载均衡 当服务流量增大时&#xff0c;通常会采用增加机器的方式进行扩容。负载均衡就是用来在多个机器或者其他资源中&#xff0c;按照一定的规则合理分配负载。其中的实现可以分成客户端负载均衡和服务端负载均衡。 服务端负载均衡 在服务端进行负载均衡的算法分配。 比…
阅读更多...
华为仓颉开发语言“可能”明天正式面世（2024年6月20日写下）

华为仓颉开发语言“可能”明天正式面世（2024年6月20日写下）

众多迹象表明&#xff0c;鸽了几次的华为仓颉开发语言&#xff0c;有望在2024华为开发者大会上正式面世&#xff0c;你的期待热情是否还在&#xff1f; 1、“仓颉编程语言”公众号面世 最近&#xff0c;华为旗下的公众号“编程语言Lab”悄然改名为“仓颉编程语言”&#xff0c…
阅读更多...
EasyCVR/EasyDSS无人机直播技术助力野生动物监测

EasyCVR/EasyDSS无人机直播技术助力野生动物监测

近日有新闻报道&#xff0c;一名挖掘机师傅在清理河道时&#xff0c;意外挖出一只稀有的扬子鳄&#xff0c;挖机师傅小心翼翼地将其放在一边&#xff0c;扬子鳄也顺势游回一旁的河道中。 随着人类对自然环境的不断探索和开发&#xff0c;野生动物及其栖息地的保护显得愈发重要。…
阅读更多...
SpringBoot对接微信公众平台（2）--- 接收普通消息Demo

SpringBoot对接微信公众平台（2）--- 接收普通消息Demo

SpringBoot对接微信公众平台&#xff08;2&#xff09;--- 接收普通消息 说明后端代码 说明 这里记录下自己学习SpringBoot对接微信公众平台的成长过程&#xff0c;以防止后面继续踩坑且方便以后直接使用。这里使用微信公众号的接口测试号来开发微信公众平台。这里承接自己的博…
阅读更多...
图像超分辨率重建

图像超分辨率重建

一、什么是图像超分辨 图像超分辨是一种技术&#xff0c;旨在通过硬件或软件的方法提高原有图像的分辨率。这一过程涉及从一系列低分辨率的图像中获取一幅高分辨率的图像&#xff0c;实现了时间分辨率向空间分辨率的转换。超分辨率重建的核心思想是利用多帧图像序列的时间带宽来…
阅读更多...
小程序使用经纬度通过腾讯位置服务、小程序jdk、逆地址解析（位置描述）获取到详细信息

小程序使用经纬度通过腾讯位置服务、小程序jdk、逆地址解析（位置描述）获取到详细信息

小程序后台 注册账户 控制台新建应用 配额 配额 下载jdk 下载 逆地址解析&#xff08;位置描述&#xff09; const QQMapWX require(../../libs/qqmap-wx-jssdk.min.js);getPosition() {console.log(getPosition);const that thisconst qqmapsdk new QQMapWX({key: JRKBZ…
阅读更多...
[Linux] Shell

[Linux] Shell

chsh不是一种sh,而是一个命令行使用程序&#xff0c;用于更改默认shell CentOS是个开源软件&#xff0c;没有sh,sh是商业版的&#xff0c; 按ls /bin/*sh显示的sh实际上是个链接文件&#xff0c;连接的bash 在命令行输入新的sh名&#xff0c;会启动一个新的进程&#xff0c; 输…
阅读更多...
IDEA2023中使用run Dashboard面板?实现批量运行微服务

IDEA2023中使用run Dashboard面板?实现批量运行微服务

1、直接点击Add service--->Run Configuration Type---->Spring Boot 2、这样就出现了run Dashboard面板&#xff0c;可同时运行多个工程模块&#xff0c;shift选中所有启动类组命名&#xff08;Group Configurations&#xff09; 3、启动所有的项目
阅读更多...
最新文章

Copyright @ 2022~2023