DTK程序简单的开发教程(简易的浏览器)
Tofloor
poster avatar
Maicss
deepin
2020-12-03 18:51
Author

这段时间在自己做一个基于DTK开发的浏览器应用,不得不说这东西对我来说还是有点吃力的,不过我不追求进度,只是慢慢的,一点一点的来开发。一边学一边做,目前大概做成了这个样子。

项目地址:点击查看


支持窗口模糊特效,未来支持透明度调节(支持关掉以节省资源)

支持明暗切换

有圆角,跟随系统设置调节

有收藏夹功能(目前比较简陋,只能有一个一级列表)

除收藏夹外,其他设置还没法保存


现在介绍一下这个主窗口的组成:


如果不需要模糊特效的话,完全可以使用DMainWindow来代替DBlurEffectWidget(图中拼写错误)和DTitlebar的组合,因为DMainWindow就是一个圆角无边框窗口和一个DTitlebar的组合,但是DMainWindow提供了一些接口来定义阴影的宽度,深度,颜色,标题栏阴影等。

DTitlebar,这是块好地,得好好利用。

这个标题栏中支持添加任何控件,用setCustomWidget方法,添加一个Widget在里边,然后在这个Widget里边添加布局和控件即可。

如图:


这个标题栏也有很多有趣的接口,比如:

titlebar->setBackgroundTransparent(true); //可以让titlebar变为透明,此时如果父窗口是模糊特效窗口,将会把效果显示出来,否则将覆盖模糊效果

值得注意的是:

通常通过调用SetWindowIcon无法改变标题栏左侧的图标,你需要再次调用DTitlebar的setIcon接口才可以实现。

如果想要在标题栏的菜单按钮添加菜单,只需要定义一个QMenu然后调用setMenu即可。

亮色和暗色模式的适配,不得不说支持亮色模式和暗色模式绝对是软件本身的加分项。

connect(DGuiApplicationHelper::instance(), &DGuiApplicationHelper::themeTypeChanged, this, [=](DGuiApplicationHelper::ColorType themeType) {
QColor main_color;
main_color=DGuiApplicationHelper::instance()->applicationPalette().highlight().color();//这是系统的活动用色
if(themeType==DGuiApplicationHelper::DarkType){//这里判断是否是暗色模式,判断后对你的图标,贴图,颜色等进行修改,用来展现一个你心目中最完美的暗色模式
qDebug()<<"Dark"; //在这里执行暗色模式下对ui界面的修改 btn_left->setIcon(QIcon::fromTheme("arrow-left"));
btn_right->setIcon(QIcon::fromTheme("arrow-right"));
btn_f5->setIcon(QIcon::fromTheme("refresh"));

}else {
qDebug()<<"Light"; //在这里执行亮色模式下对ui界面的修改 btn_left->setIcon(QIcon::fromTheme("arrow-left-dark"));
btn_right->setIcon(QIcon::fromTheme("arrow-right-dark"));
btn_f5->setIcon(QIcon::fromTheme("refresh_dark"));
} //在这里执行对活动用色的UI界面修改 });

上边这个是给大家提供的模板,需要包含头文件DGuiApplicationHelper。

当主题被修改时,会触发themeTypeChanged信号,然后返回他的颜色主题还有亮暗模式两个参数

活动用色想必大家都知道,在控制中心-个性化-通用中可以调节。

兼顾低性能主机,适当关闭模糊特效

DBlurEffectWidget有一个接口可以用来关闭模糊特效,但是这个接口多少有点鸡肋。

setBlurEnabled(false);//用这个接口关闭模糊后,效果是下边这个鬼样子,完全透明!


我找了一圈也没研究明白这玩意怎么让他变成不透明,没找到。

于是乎我就来了一波骚操作,在这个窗口上再放一个子Widget,然后用以下方法让他变成不透明并定义颜色。

QPalette plt;
plt.setColor(QPalette::Background,QColor(40,40,40,255));
w->setPalette(plt);

这里需要通过上边亮色和暗色模式来设置颜色,具体怎么办我就不赘述了。

授人以鱼不如授人以渔

下边和大家分享一下我学习DTK的几个途径

1.官方文档页面(链接)

2.gitee文档页面(链接)比较旧

3.官方代码仓库(链接)

4.官方例子(链接)需要clone下载自己编译

5.百度(可找到的资源相对比较少)

6.如果想马上上手,可以先用这个链接,这时我写的一个简单的样例,里边有详细的介绍,在这里就不多说了。

先写这些吧,这些基本操作基本够用了,其他好玩的东西等我慢慢学习整理后再分享给大家~

当然如果有大神想加入这个浏览器的开发,可以评论或者私信我,大家一起玩

由于个人技术和能力的限制,这个浏览器只是一个学习开发的项目,目前并没有打算以后正式打包发放给大家,大家如果想试用的话可以去项目地址下载源代码自行编译。






Reply Favorite View the author
Comments
poster avatar
ltree
2020-12-12 01:41
DTitlebar是好东西
poster avatar
stainsun
2020-12-04 20:24
感谢交流,祝喜欢分享的人:心想事成、马到成功。
poster avatar
oliverwang
2020-12-04 05:34
sudo apt install qtwebengine5-dev 否者报错 Project ERROR: Unknown module(s) in QT: webenginewidgets
All Replies
2 / 2
To page
houyawei
deepin
2020-12-04 19:20
#21

装完dtk编译三件套

sudo apt install libdtkcore-dev libdtkgui-dev libdtkwidget-dev
 
,还需要装啥别的东西吗。


Reply View the author
神末shenmo
deepin
Spark-App
2020-12-04 20:36
#22
houyawei

装完dtk编译三件套

sudo apt install libdtkcore-dev libdtkgui-dev libdtkwidget-dev
 
,还需要装啥别的东西吗。


qt5-default装了么?

Reply View the author
houyawei
deepin
2020-12-04 21:08
#23
神末shenmo

qt5-default装了么?

装了的

qt5-default 已经是最新版 (5.11.3.28-1+eagle)。

Reply View the author
Maicss
deepin
2020-12-04 21:18
#24
houyawei

装完dtk编译三件套

sudo apt install libdtkcore-dev libdtkgui-dev libdtkwidget-dev
 
,还需要装啥别的东西吗。


在.pro文件中添加这两行

CONFIG += link_pkgconfig
PKGCONFIG += dtkwidget


然后在需要用到DTK控件的地方添加宏

DWIDGET_USE_NAMESPACE



Reply View the author
神末shenmo
deepin
Spark-App
2020-12-04 22:26
#25
houyawei

装了的

qt5-default 已经是最新版 (5.11.3.28-1+eagle)。

这个Template是我fork Maicss大佬的

还是问真正的大佬吧[喜欢]

Reply View the author
爪巴戈
deepin
2020-12-04 23:31
#26

目前Javaer,我会努力的!

Reply View the author
海天鹰
deepin
2020-12-05 08:13
#27

怎么和 deepin-browser 一模一样?

Reply View the author
Maicss
deepin
2020-12-05 15:23
#28
海天鹰

怎么和 deepin-browser 一模一样?

一模一样,你值得是和官方吗,和官方不一样啊,官方不是用的dtk

Reply View the author
zanyrain
deepin
2020-12-06 02:23
#29

DBlurEffectWidget 这个透明还挺好玩的,

Reply View the author
houyawei
deepin
2020-12-13 22:33
#30
Maicss

在.pro文件中添加这两行

CONFIG += link_pkgconfig
PKGCONFIG += dtkwidget


然后在需要用到DTK控件的地方添加宏

DWIDGET_USE_NAMESPACE



我后来把我之前的qtcreator卸载了,再装商店里面的就可以了。[尖叫]

Reply View the author
murphey
deepin
2020-12-15 16:56
#31

大神,有没有详细点的linux dde开发教程呢?就是从小白,从搭建开发环境开始那样的[污]

Reply View the author
神末shenmo
deepin
Spark-App
2020-12-15 20:24
#32
murphey

大神,有没有详细点的linux dde开发教程呢?就是从小白,从搭建开发环境开始那样的[污]

@maicss

Reply View the author
jiutian123
deepin
2020-12-24 05:06
#33
Maicss

论坛的链接跳转是不是有问题,大家打开链接时复制打开吧[困]

网址 404错误

Reply View the author
Maicss
deepin
2020-12-24 20:52
#34
jiutian123

网址 404错误

https://gitee.com/Maicss/dbrowser

改了一下项目名称,这个是新的

Reply View the author
quan-jia-xi-wang
deepin
2021-10-08 23:26
#35

请问你这个是基于哪个浏览器框架来实现的?QtWebkit、QtWebEngine、QAxWidget?感谢回复

Reply View the author
Maicss
deepin
2021-10-11 06:02
#36
quan-jia-xi-wang

请问你这个是基于哪个浏览器框架来实现的?QtWebkit、QtWebEngine、QAxWidget?感谢回复

第二个

Reply View the author
把一切操作变成GUI
deepin
Backbone of ecological co-construction group
2024-04-10 17:43
#37

deepin 23现在自带的浏览器 是在你的基础上面改的吗😂

Reply View the author
2 / 2
To page