一、Flutter的Windows端DIY标题栏

记录下实习过程中遇到的比较有记录意义的知识点吧,也是为了自己巩固记忆!本人小白,大佬勿喷 所有的代码均是已实现才上传!!!(版本问题忽略 取消Windows端默认的标题栏,以及最大最小化按钮。 先来看下我们的最终目标吧:

不要疑惑这就是最终目标:我们自定义的右上角三个按钮 +实现按住顶部可以拖拽

正文开始

第一步、导包 dependencies:下面

第二步、import引入 import 'package:bitsdojo_window/bitsdojo_window.dart';

现在你已经成功了一大半,接下来就是尽情的使用作者给我们提供好的组件即可, flutter主打的就是开箱即用

目标一:创建自定义按钮(最小化,最大化,关闭)

假设此时你已经掌握了布局基础知识,在我们的右上方(当然你想放哪里都可以 ),使用WindowTitleBarBox 组件来布局我们想要的Button即可。 (前提是你的组件应该处于合理的位置,比如右上角。 注意WindowTitleBarBox是只有child属性,想要放多个组件在使用一个布局组件接口,Row(推荐)/Column,) 代码如下:

WindowButtons 只是一个放了三个按钮的自定义组件而已,不要害怕

下面放上最简单的方式,只有程序跑起来了才能真正的理解嘛! 真正的几行代码实现,样式再说。

上述代码效果如下

目标二:删除原有的标题,按钮等

此时我们要做的事就是来到windows/runner/main.cpp目录下,在最上方插入这两行代码,

#include <bitsdojo_window_windows/bitsdojo_window_plugin.h>

auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME);

由于删除了windows自带功能,此时需要关闭下程序,再打开。

目标三:实现启动程序应用的大小自定义

来到程序的main主函数中,在runApp后面 见名只意

延申部分

一、自定义按钮的样式以及Hover状态等

见名即可知意,样式这东西多试试,学前端的乐趣就再次。

将以上变量赋予按钮的 colors: buttonColors,属性即可

二、打开程序时窗口闪烁

由于vscode默认窗口大小与我们设置初始化的大小不同,所以需要改变的话要做两步。

一、来到windows/runner/main.cpp目录,将代码改为 #include <bitsdojo_window_windows/bitsdojo_window_plugin.h>

auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_CLOSE);

二、切记,一定要打开在目标三中加上最后一句appWindow.show() 否则你会看不到自己的窗口。

🐕!!!爱敲代码的欧文。 当然了,能看文档看懂的可直接移步文档。愿大家都高薪,一起加油!

相关推荐
世人万千丶8 小时前
Flutter 框架跨平台鸿蒙开发 - 鸿蒙版本五子棋游戏应用
学习·flutter·游戏·华为·harmonyos·鸿蒙
autumn20059 小时前
Flutter 框架跨平台鸿蒙开发 - 连连看游戏应用
flutter·华为·harmonyos
程序员老刘10 小时前
AI时代我们是否还需要学编程?丨《Flutter跨平台开发核心技巧与应用》新书上市啦
flutter·ai编程·客户端
浮芷.11 小时前
Flutter 框架跨平台鸿蒙开发 - flutter版本样式的美食菜谱应用
flutter·harmonyos·美食
小雨天気.11 小时前
Flutter 框架跨平台鸿蒙开发 - 生活中的书法练习应用开发文档
flutter·生活·harmonyos
2301_8227032012 小时前
开源鸿蒙跨平台Flutter开发:FASTA 格式解析进阶:序列校验与异常处理机制实现
flutter·华为·开源·鸿蒙
AI_零食13 小时前
Flutter 框架跨平台鸿蒙开发 - 鸿蒙麻将游戏应用
学习·flutter·游戏·华为·交互·harmonyos
dragon72513 小时前
Flutter错误处理机制
前端·flutter
独特的螺狮粉13 小时前
Flutter 框架跨平台鸿蒙开发 - 睡眠白噪音开发纪录
flutter·华为·harmonyos·鸿蒙
提子拌饭13313 小时前
Flutter 框架跨平台鸿蒙开发 - 商用项目看板应用
flutter·华为·harmonyos