微网站的建设常州seo收费
一、界面优化效果
下方为界面优化完成和优化前的效果对比。
优化前：
优化后：
二、优化内容
- 添加标题栏
- 添加图片（图图标素材源自阿里巴巴矢量图标库）
- 更新UI内容（微调大小、布局比例）
- 添加鼠标事件函数，实现拖动功能
- 添加样式重载函数
- 图标添加鼠标悬浮提示
- 添加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; // 鼠标按下变量值更为truem_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^/)
注：文章为作者编程过程中所遇到的问题和总结，内容仅供参考，若有错误欢迎指出。
注：如有侵权，请联系作者删除