Qt之天气预报——界面优化篇（含源码+注释）

一、界面优化效果

下方为界面优化完成和优化前的效果对比。
优化前：

优化后：

二、优化内容

1. 添加标题栏
2. 添加图片（图图标素材源自阿里巴巴矢量图标库）
3. 更新UI内容（微调大小、布局比例）
4. 添加鼠标事件函数，实现拖动功能
5. 添加样式重载函数
6. 图标添加鼠标悬浮提示
7. 添加QSS样式以及加载函数

三、优化源码（主要优化内容）

CWeatherForecast类的更新

// .h 头文件
public：
    /**
     * @brief overloadStyle 样式重载函数
     */
    void overloadStyle();
    
    // QWidget interface
protected:
    /**
     * @brief mousePressEvent 鼠标按下事件
     * @param event 鼠标事件对象
     */
    void mousePressEvent(QMouseEvent *event);

    /**
     * @brief mouseReleaseEvent 鼠标释放事件
     * @param event 鼠标事件对象
     */
    void mouseReleaseEvent(QMouseEvent *event);

    /**
     * @brief mouseMoveEvent 鼠标移动事件
     * @param event 鼠标事件对象
     */
    void mouseMoveEvent(QMouseEvent *event);
private：
    bool                                        m_pressFlag;            // 鼠标按下标记

    QPoint                                      m_startPos;             // 鼠标按下位置

///
// cpp 源文件

void CWeatherForecast::overloadStyle()
{
    // 卸载程序样式
    qApp->style()->unpolish(qApp);
    // 获取当前时间
    int hour = QTime::currentTime().hour();
    // 判断是否夜晚的标记值
    bool flag = hour >= 8 && hour < 20;
    // 设置是否白日动态属性值
    ui->centralWidget->setProperty("IS_DAY", flag);
    // 重载样式
    qApp->style()->polish(qApp);

    // 获取所有控件链表，遍历重绘
    foreach(QWidget *wgt, qApp->allWidgets())
    {
        wgt->repaint();
    }
}


void CWeatherForecast::on_cityEdit_textChanged(const QString &arg1)
{
    // 当城市编码容器包含当前文本Key值则进入
    if(m_codeInfoMap.contains(arg1) || m_codeInfoMap.values().contains(arg1))
    {
        // 发送天气信息请求
        sendWeatherInfoRequest();
    }
}

void CWeatherForecast::mousePressEvent(QMouseEvent *event)
{
    // 当标题栏包含鼠标位置，并且鼠标为左键按下时进入
    if(ui->titleWgt->rect().contains(event->pos()) && Qt::LeftButton == event->button())
    {
        m_pressFlag = true; // 鼠标按下变量值更为true
        m_startPos = event->globalPos();    // 获取鼠标的全局位置
    }
}

void CWeatherForecast::mouseReleaseEvent(QMouseEvent *event)
{
    Q_UNUSED(event);
    m_pressFlag = false;    // 鼠标释放时标记值更为false
}

void CWeatherForecast::mouseMoveEvent(QMouseEvent *event)
{
    // 当标记值为true时进入
    if(m_pressFlag)
    {
        // 当前窗口移动，当前位置 + 最新鼠标全局位置 - 上次鼠标全局位置（此处为了计算出偏移量）
        this->move(this->pos() + event->globalPos() - m_startPos);
        m_startPos = event->globalPos();    // 更新鼠标全局位置
    }
}

WeatherForecast.qss

/****QWidget****/
QWidget
{
	color:white;	/*所有控件字体颜色为白色*/
	background-color:#4b84ff;	/*所有控件背景颜色*/
	background:transparent;		/*所有控件效果透明*/
	font-family:KaiTi;	/*所有控件字体为楷体*/
	font-size:18px;	/*所有控件字体大小*/
}

/**********主窗口**********/
/*日间背景*/
QWidget[MAIN_WINDOW = true][IS_DAY = true]
{
	border-image:url(./StyleTheme/Theme/bg_day.png); /*添加背景图片*/
}
/*夜间背景*/
QWidget[MAIN_WINDOW = true][IS_DAY = false]
{
	border-image:url(./StyleTheme/Theme/bg_night.png);	/*添加背景图片*/
}

QWidget[TITLE_WGT = true]
{
	border-bottom: 1px solid white;
	border-top: 1px solid white;
}

/****QLabel****/
/*天气预报图标*/
QLabel[ICON_LAB = true]
{
	border-image:url(./StyleTheme/Base/tqyb.png);	/*添加标签背景图片*/
}

/*城市标签*/
QLabel[CITY = true]
{
	font-weight:bold;	/*粗体*/
	font-size:20px;		/*字体大小*/
}	

/*天气标签图标*/
QLabel[WEATHER = "晴"]
{
	border-image:url(./StyleTheme/Theme/tianqi-qing.png);
}

QLabel[WEATHER = "阴"]
{
	border-image:url(./StyleTheme/Theme/tianqi-yin.png);
}

QLabel[WEATHER = "多云"]
{
	border-image:url(./StyleTheme/Theme/tianqi-duoyun.png);
}

QLabel[WEATHER = "小雨"]
{
	border-image:url(./StyleTheme/Theme/tianqi-xiaoyu.png);
}

QLabel[WEATHER = "中雨"]
{
	border-image:url(./StyleTheme/Theme/tianqi-zhongyu.png);
}

QLabel[WEATHER = "大雨"]
{
	border-image:url(./StyleTheme/Theme/tianqi-dayu.png);
}

QLabel[WEATHER = "暴雨"]
{
	border-image:url(./StyleTheme/Theme/tianqi-baoyu.png);
}

QLabel[WEATHER = "大暴雨"]
{
	border-image:url(./StyleTheme/Theme/tianqi-dabaoyu.png);
}

QLabel[WEATHER = "小雪"]
{
	border-image:url(./StyleTheme/Theme/tianqi-xiaoxue.png);
}

QLabel[WEATHER = "中雪"]
{
	border-image:url(./StyleTheme/Theme/tianqi-zhongxue.png);
}

QLabel[WEATHER = "大雪"]
{
	border-image:url(./StyleTheme/Theme/tianqi-daxue.png);
}

QLabel[WEATHER = "暴雪"]
{
	border-image:url(./StyleTheme/Theme/tianqi-baoxue.png);
}

QLabel[WEATHER = "雷阵雨"]
{
	border-image:url(./StyleTheme/Theme/tianqi-leiyu.png);
}

QLabel[WEATHER = "浮尘"]
{
	border-image:url(./StyleTheme/Theme/tianqi-shachen.png);
}

QLabel[WEATHER = "霜"]
{
	border-image:url(./StyleTheme/Theme/tianqi-shaung.png);
}

QLabel[WEATHER = "雾"]
{
	border-image:url(./StyleTheme/Theme/tianqi-wu.png);
}

QLabel[WEATHER = "扬沙"]
{
	border-image:url(./StyleTheme/Theme/tianqi-yangsha.png);
}

QLabel[WEATHER = "雨夹雪"]
{
	border-image:url(./StyleTheme/Theme/tianqi-yujiaxue.png);
}

/****QPushButton****/
/*切换按钮*/
QPushButton[SWITCH_MODE_BTN = true]
{
	background-color: #808080;	/*切换按钮背景颜色*/
	border: 2px solid #ffffff;	/*切换按钮边框样式*/
	border-radius: 5px;	/*切换按钮边角圆润*/
}

/*切换按钮悬浮*/
QPushButton[SWITCH_MODE_BTN = true]:hover
{
	background-color: #a2a2a2;	/*悬浮背景色*/
}

/*关闭按钮*/
QPushButton[CLOSE_BTN = true]
{
	width:24px;
	height:24px;
	border-image:url(./StyleTheme/Base/close.png);	/*关闭按钮背景*/
}	

/*关闭按钮悬浮*/
QPushButton[CLOSE_BTN = true]:hover
{
	border-image:url(./StyleTheme/Base/close_hover.png);	/*关闭按钮悬浮背景*/
}

/*最小化按钮*/
QPushButton[MIN_BTN = true]
{
	width:24px;
	height:24px;
	border-image:url(./StyleTheme/Base/min.png);	/*最小化按钮背景*/
}	

/*最小化按钮悬浮*/
QPushButton[MIN_BTN = true]:hover
{
	border-image:url(./StyleTheme/Base/min_hover.png);	/*最小化按钮悬浮背景*/
}


/****QComboBox****/
/*下拉框*/
QComboBox
{
	border: 1px solid #ffffff; /*下拉框样式*/
	border-radius:3px;	/*下拉框边角圆润*/
}

/*点击下拉框的样式*/
QComboBox:on
{
	background-color:rgba(172, 179, 211); /*点击后的背景颜色*/
	border:1px solid blue;
}

/*下拉框下拉按钮的边框*/
QComboBox::drop-down 
{
	border:none;	/*没有边框*/
}

QComboBox::down-arrow 
{
	width: 9px;
	height: 9px;
 	image: url(./StyleTheme/Base/arrow_down2.png);	/*下拉按钮背景图片（未点击）*/
}

QComboBox::down-arrow:on 
{
	image: url(./StyleTheme/Base/arrow_up2.png);	/*下拉按钮背景图片（已点击）*/
}

/*下拉列表的样式*/
QComboBox QAbstractItemView 
{
    background-color: gray; /*下拉列表的背景色*/
}

/****QMenu****/
QMenu 
{
	border: 1px solid #CCCCCC; /* 边框宽度为1px，颜色为#CCCCCC */
	border-radius: 3px; /* 边框圆角 */
	background-color: #FAFAFC; /* 背景颜色 */
}

QMenu::item 
{ /* 菜单子控件item，为菜单项在default的状态 */
	border: 0px solid transparent;
	background-color: transparent;
	color: black; /* 文本颜色 */
	font-size: 18px;
	min-height: 25px;
	padding:5px 5px 5px 5px;
}

QMenu::item:selected 
{ /* 为菜单项在selected的状态 */
	background-color: #EBEBEB;
}

/****QMessageBox****/
QMessageBox
{
	background-color:skyblue;
}

总结

界面优化主要提供给用户使用，养眼的样式会给用户提供良好的体验。同时，做界面优化篇我还体验到UI的重要性，一个好的UI设计会带来许多便利。有需要的小伙伴可私聊取源码。

相关文章

Qt之天气预报实现（一）预备篇
Qt之天气预报——功能实现篇（含源码+注释）

友情提示——哪里看不懂可私哦，让我们一起互相进步吧
（创作不易，请留下一个免费的赞叭 谢谢 ^o^/)

注：文章为作者编程过程中所遇到的问题和总结，内容仅供参考，若有错误欢迎指出。
注：如有侵权，请联系作者删除