[go] 360安全卫士二 --闪烁的按钮

我前两天刚写了个360安全卫士的GO，今天就有100人浏览了，真是惊讶，呵呵；文采不好，各位看官见谅。

源码地址: https://github.com/JianBiHua/go_360_safe

现在从第一节进入第二节，前面的光秃秃的窗体该加点东西了。
先看看我的工程架构吧.
我解释下架构哈

1. qss: 相当于html里的css，由于显示不一样的效果，如主题之类的实现，就可以通过动态加载不同的qss样式实现。
2. resources: 看英文应该就明白了吧，资源呀，里面会放图片之类的东西。
3. src: 代码呗
4. ui: 对QT有研究的朋友就应该知道，qt里面的界面可以通过*.ui界面加载的，之后我也会在里面进行适量添加。
5. 我们的入口函数当然是在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的写法呀!!!
下面实现的功能:

1. 显示按钮正常状态时的图片
2. 显示鼠标滑过时的图片

/***********************修改顶端右上四个按钮的图片***************************/
/* 这个是初始显示状态 */
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);
}

效果图如下， 我特意截了张按下最小化按钮的图片: