我前两天刚写了个360安全卫士的GO,今天就有100人浏览了,真是惊讶,呵呵;文采不好,各位看官见谅。
源码地址: https://github.com/JianBiHua/go_360_safe
现在从第一节进入第二节,前面的光秃秃的窗体该加点东西了。
先看看我的工程架构吧.
我解释下架构哈
- qss: 相当于html里的css,由于显示不一样的效果,如主题之类的实现,就可以通过动态加载不同的qss样式实现。
- resources: 看英文应该就明白了吧,资源呀,里面会放图片之类的东西。
- src: 代码呗
- ui: 对QT有研究的朋友就应该知道,qt里面的界面可以通过*.ui界面加载的,之后我也会在里面进行适量添加。
- 我们的入口函数当然是在main.go中喽。
好了,开始代码吧, 我只讲解一些核心的,其它的自行看代码吧。
上节代码我进行了封装,想做大项目,代码就不能太随意,否则,以后维护起来就会非常吃力了,所以封装是个不错的办法哦。
核心代码一:
下面这个代码是干嘛的呢?看着也肯简单, 就这么几句,
读取stylesheet.qss文件,并让程序使用该样式(我上面有说过,qss可以动态设置,以实现切换主题的目的,各位可自行实现。)
// 设置qss,相当于html中的css文件
data, err := ioutil.ReadFile("qss/stylesheet.qss")
if err != nil {
fmt.Println("File reading error", err)
return
}
mw.app.SetStyleSheet(string(data))
这里有个要注意的地方,读取文件的路径,有些人直接用我的代码可能是跑不起来的,因为路径不对,读不到呀;看着代码明明就是这个路径呀,别急,看下图:
看这个project GOPATH,路径设置了,才能正确找到文件哦。
核心代码2:
画按钮喽, 代码有注释,挺详细的;但是运行起来可能会很失望,按钮不好看呀,一块一块的,别急,下面看怎么变漂亮哦。
// showTopLayout show top layout
// 显示顶部的布局
func (mw * MainWindow) showTopLayout() {
widget := widgets.NewQWidget(mw.window, 0)
widget.SetLayout(widgets.NewQVBoxLayout())
widget.SetGeometry2(0, 0, WIDTH, 30)
// ==============右侧四个按钮, 从右往左=============
// 关闭按钮
close := widgets.NewQPushButton(widget)
close.SetGeometry2(WIDTH-30, 5, 20, 20)
// 设置这个有什么用呢? 为了让qss找到这个QPushButton
close.SetObjectName("close")
close.ConnectClicked(func(checked bool) {
// 应用退出
mw.app.Exit(0)
})
// 最小化按钮
min := widgets.NewQPushButton(widget)
min.SetGeometry2(WIDTH-60, 5, 20, 20)
min.SetObjectName("min")
min.ConnectClicked(func(checked bool) {
// 应用最小化
mw.window.ShowMinimized()
})
// 菜单按钮
menu := widgets.NewQPushButton(widget)
menu.SetGeometry2(WIDTH-90, 5, 20, 20)
menu.SetObjectName("menu")
// 主题按钮
theme := widgets.NewQPushButton(widget)
theme.SetGeometry2(WIDTH-120, 5, 20, 20)
theme.SetObjectName("theme")
// 显示图标
icon := widgets.NewQWidget(widget, core.Qt__Widget)
icon.SetGeometry2(5, 5, 20, 20)
icon.SetStyleSheet("border-image: url(resources/icon.png)")
// 显示名字
title := widgets.NewQLabel(widget,core.Qt__Widget)
title.SetGeometry2(35, 5, 100, 20)
title.SetText("360安全卫士11")
// 字体颜色设置为白色
title.SetStyleSheet("color: #FFFFFF")
}
这里就要发挥qss的作用了,看着像不像css,这他喵的就是css的写法呀!!!
下面实现的功能:
- 显示按钮正常状态时的图片
- 显示鼠标滑过时的图片
/***********************修改顶端右上四个按钮的图片***************************/
/* 这个是初始显示状态 */
QPushButton#close {
border-image: url(resources/top/top_close.png);
}
/* 这个有啥用呢? 鼠标点击上去响应*/
QPushButton#close::hover {
border-image: url(resources/top/top_close_b.png);
}
QPushButton#min {
border-image: url(resources/top/top_min.png);
}
QPushButton#min::hover {
border-image: url(resources/top/top_min_b.png);
}
QPushButton#menu {
border-image: url(resources/top/top_menu.png);
}
/* 我这里没有,点击的图片,所以设置跟普通一样 */
QPushButton#menu::hover {
border-image: url(resources/top/top_menu.png);
}
QPushButton#theme {
border-image: url(resources/top/top_theme.png);
}
/* 我这里没有,点击的图片,所以设置跟普通一样 */
QPushButton#theme::hover {
border-image: url(resources/top/top_theme.png);
}
效果图如下, 我特意截了张按下最小化按钮的图片: