day04(Qt)UI设计

目录

UI设计

1. Designer 设计师(掌握)

2. Layout 布局(重点)

2.1 基本使用

2.2 高级用法

2.3 代码布局(了解)

3. Designer与C++的关系(熟悉)

4. 基本组件(掌握)

4.1 QWidget

4.2 QLabel 标签

4.3 QAbstractButton 按钮类

4.4 QLineEdit 单行文本输入框

4.5 QComboBox 组合框

4.6 一组与数字相关的组件


UI设计

1. Designer 设计师(掌握)

Designer是Qt内置的一款界面设计程序,设计的界面文件为.ui格式。

C++程序员通常不会单独启动Designer,如果要在项目中使用Designer程序,只需要在新建项目时,勾选“创建界面文件”选项。

这样的项目自带dialog.ui,双击dialog.ui可以直接使用Designer程序打开此文件。

2. Layout 布局(重点)

2.1 基本使用

可以把布局看做是一个透明的盒子,内部放置各种组件对象,这些组件对象会按照布局预设的规则自动排序,并形成一个布局整体。

Qt中有四种布局:

主要学习前两种,垂直/水平布局指的是布局中所有的子组件垂直/水平排成一排,常用属性如下:

需要注意的是,最终的显示效果是多个因素综合决定的,并非一个因素完全决定。

2.2 高级用法

  • 伸展器

如果需要在布局中填充空白,可以使用伸展器组件。

  • 嵌套

布局和布局之间可以嵌套,内层布局相当于外层布局的一个组件。

  • 贴合

选中窗口对象,点击,可以让最外层布局贴合窗口,以达到窗口大小自适应效果。

可以点击打破任何一个选中的布局,例如取消贴合效果,需要先选中窗口,然后点击此按钮。

2.3 代码布局(了解)

也可以使用C++进行布局,仅做展示。

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QVBoxLayout>
#include <QPushButton>

class Dialog : public QDialog
{
     
     
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    QVBoxLayout* layout;
    QPushButton* btn1;
    QPushButton* btn2;
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

<think>好的,用户现在需要根据最初的Qt程序,提供XML格式的UI界面设计代码。首先,我需要回顾用户最初的需求,即手机销售管理系统的Qt图形界面应用。用户之前已经得到了一个C语言控制台程序转换为Qt的方案,现在需要对应的UI界面的XML代码,也就是QtDesigner生成的.ui文件的XML表示。首先,我需要确定UI的主要组成部分。根据最初的描述,主窗口应该包含多个选项卡(QTabWidget),分别对应手机管理、销售管理、查询统计和排序功能。每个选项卡内需要有输入控件、操作按钮和数据显示表格。接下来,我需要考虑每个选项卡的具体控件布局。例如,手机管理选项卡需要输入手机编号、型号、品牌、进价、库存的控件,以及添加、修改、删除、刷新按钮,还有显示手机信息的表格。销售管理选项卡需要输入手机编号、售价、销售数量、销售日期的控件,添加销售记录和刷新的按钮,以及显示销售记录的表格。查询统计选项卡需要输入查询编号和统计品牌的控件,对应的查询和统计按钮,以及结果显示区域。排序选项卡需要按进价和销售日期排序的按钮。然后,我需要确保每个控件的objectName与之前C++代码中的槽函数命名一致,例如按钮btnAddPhone对应on_btnAddPhone_clicked的槽函数,这样Qt的元对象系统才能自动关联信号和槽。另外,需要注意控件的属性设置,比如QDoubleSpinBox的最小值和小数位数,QSpinBox的最小值,QDateEdit的显示格式和日历弹窗,QTableWidget的列数和表头标签等。这些属性需要在XML中正确设置,以确保界面的功能和外观符合要求。还需要考虑布局管理,使用垂直布局(QVBoxLayout)和网格布局(QGridLayout)来排列控件,确保界面在调整窗口大小时能够合理缩放,控件排列整齐。最后,需要验证XML结构的正确性,确保所有widget和布局正确嵌套,属性设置无误,没有语法错误。同时,资源部分(resources)和连接部分(connections)如果没有额外内容,可以留空。总结来说,我需要按照用户最初的需求,详细描述每个选项卡内的控件布局和属性,生成符合QtDesigner规范的XML代码,确保与之前的C++代码兼容,并正确实现所有功能。</think> 以下是完整的XML格式UI界面设计代码(对应最初的Qt手机销售管理系统需求),严格按照功能模块和控件命名实现: ```xml <?xml version="1.0" encoding="UTF-8"?> <ui version="4.0"> <class>MainWindow</class> <widget class="QMainWindow" name="MainWindow"> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>1200</width> <height>800</height> </rect> </property> <property name="windowTitle"> <string>手机销售管理系统</string> </property> <widget class="QWidget" name="centralwidget"> <layout class="QVBoxLayout" name="verticalLayout" stretch="0,1"> <item> <widget class="QTabWidget" name="tabWidget"> <property name="currentIndex"> <number>0</number> </property> <!-- 手机管理选项卡 --> <widget class="QWidget" name="tab_PhoneManage"> <layout class="QVBoxLayout" name="layout_PhoneMain"> <!-- 输入表单区域 --> <layout class="QGridLayout" name="grid_PhoneInput" spacing="10"> <item row="0" column="0"> <widget class="QLabel" name="label_PhoneID"> <property name="text"> <string>手机编号:</string> </property> </widget> </item> <item row="0" column="1"> <widget class="QLineEdit" name="txtPhoneID"> <property name="placeholderText"> <string>必填,20位以内</string> </property> </widget> </item> <item row="0" column="2"> <widget class="QLabel" name="label_Model"> <property name="text"> <string>手机型号:</string> </property> </widget> </item> <item row="0" column="3"> <widget class="QLineEdit" name="txtModel"/> </item> <item row="1" column="0"> <widget class="QLabel" name="label_Brand"> <property name="text"> <string>手机品牌:</string> </property> </widget> </item> <item row="1" column="1"> <widget class="QLineEdit" name="txtBrand"/> </item> <item row="1" column="2"> <widget class="QLabel" name="label_PPrice"> <property name="text"> <string>进价(元):</string> </property> </widget> </item> <item row="1" column="3"> <widget class="QDoubleSpinBox" name="txtPPrice"> <property name="minimum"> <double>0.00</double> </property> <property name="decimals"> <number>2</number> </property> </widget> </item> <item row="2" column="0"> <widget class="QLabel" name="label_Stock"> <property name="text"> <string>库存数量:</string> </property> </widget> </item> <item row="2" column="1"> <widget class="QSpinBox" name="txtStock"> <property name="minimum"> <number>0</number> </property> </widget> </item> </layout> <!-- 操作按钮区域 --> <layout class="QHBoxLayout" name="layout_PhoneBtns" spacing="20"> <item> <widget class="QPushButton" name="btnAddPhone"> <property name="text"> <string>添加手机</string> </property> <property name="iconSize"> <size> <width>20</width> <height>20</height> </size> </property> </widget> </item> <item> <widget class="QPushButton" name="btnModifyPhone"> <property name="text"> <string>修改信息</string> </property> </widget> </item> <item> <widget class="QPushButton" name="btnDeletePhone"> <property name="text"> <string>删除手机</string> </property> </widget> </item> <item> <widget class="QPushButton" name="btnRefreshPhone"> <property name="text"> <string>刷新列表</string> </property> </widget> </item> </layout> <!-- 手机信息表格 --> <widget class="QTableWidget" name="tablePhoneList"> <property name="columnCount"> <number>5</number> </property> <property name="rowCount"> <number>0</number> </property> <column> <property name="text"> <string>编号</string> </property> </column> <column> <property name="text"> <string>型号</string> </property> </column> <column> <property name="text"> <string>品牌</string> </property> </column> <column> <property name="text"> <string>进价(元)</string> </property> </column> <column> <property name="text"> <string>库存</string> </property> </column> <property name="alternatingRowColors"> <bool>true</bool> </property> </widget> </layout> <property name="title"> <string>手机管理</string> </property> </widget> <!-- 销售管理选项卡 --> <widget class="QWidget" name="tab_SaleManage"> <layout class="QVBoxLayout" name="layout_SaleMain"> <!-- 销售输入表单 --> <layout class="QGridLayout" name="grid_SaleInput" spacing="10"> <item row="0" column="0"> <widget class="QLabel" name="label_SaleID"> <property name="text"> <string>手机编号:</string> </property> </widget> </item> <item row="0" column="1"> <widget class="QLineEdit" name="txtSaleID"> <property name="placeholderText"> <string>需与手机编号一致</string> </property> </widget> </item> <item row="0" column="2"> <widget class="QLabel" name="label_SPrice"> <property name="text"> <string>销售单价:</string> </property> </widget> </item> <item row="0" column="3"> <widget class="QDoubleSpinBox" name="txtSPrice"> <property name="minimum"> <double>0.00</double> </property> <property name="decimals"> <number>2</number> </property> </widget> </item> <item row="1" column="0"> <widget class="QLabel" name="label_SaleNum"> <property name="text"> <string>销售数量:</string> </property> </widget> </item> <item row="1" column="1"> <widget class="QSpinBox" name="txtSaleNum"> <property name="minimum"> <number>1</number> </property> </widget> </item> <item row="1" column="2"> <widget class="QLabel" name="label_SaleDate"> <property name="text"> <string>销售日期:</string> </property> </widget> </item> <item row="1" column="3"> <widget class="QDateEdit" name="dateSale"> <property name="displayFormat"> <string>yyyy-MM-dd</string> </property> <property name="calendarPopup"> <bool>true</bool> </property> <property name="date"> <date> <year>2024</year> <month>1</month> <day>1</day> </date> </property> </widget> </item> </layout> <!-- 销售操作按钮 --> <layout class="QHBoxLayout" name="layout_SaleBtns" spacing="20"> <item> <widget class="QPushButton" name="btnAddSale"> <property name="text"> <string>添加销售记录</string> </property> </widget> </item> <item> <widget class="QPushButton" name="btnRefreshSale"> <property name="text"> <string>刷新销售记录</string> </property> </widget> </item> </layout> <!-- 销售信息表格 --> <widget class="QTableWidget" name="tableSaleList"> <property name="columnCount"> <number>6</number> </property> <property name="rowCount"> <number>0</number> </property> <column> <property name="text"> <string>编号</string> </property> </column> <column> <property name="text"> <string>型号</string> </property> </column> <column> <property name="text"> <string>品牌</string> </property> </column> <column> <property name="text"> <string>单价(元)</string> </property> </column> <column> <property name="text"> <string>数量</string> </property> </column> <column> <property name="text"> <string>销售日期</string> </property> </column> <property name="alternatingRowColors"> <bool>true</bool> </property> </widget> </layout> <property name="title"> <string>销售管理</string> </property> </widget> <!-- 查询统计选项卡 --> <widget class="QWidget" name="tab_Statistics"> <layout class="QVBoxLayout" name="layout_StatMain" spacing="15"> <!-- 查询条件区域 --> <layout class="QGridLayout" name="grid_StatInput" spacing="10"> <item row="0" column="0"> <widget class="QLabel" name="label_SearchID"> <property name="text"> <string>按编号查询:</string> </property> </widget> </item> <item row="0" column="1"> <widget class="QLineEdit" name="txtSearchID"/> </item> <item row="0" column="2"> <widget class="QPushButton" name="btnSearchID"> <property name="text"> <string>查询</string> </property> </widget> </item> <item row="1" column="0"> <widget class="QLabel" name="label_StatBrand"> <property name="text"> <string>按品牌统计:</string> </property> </widget> </item> <item row="1" column="1"> <widget class="QLineEdit" name="txtStatBrand"/> </item> <item row="1" column="2"> <widget class="QPushButton" name="btnStatBrand"> <property name="text"> <string>统计</string> </property> </widget> </item> </layout> <!-- 结果显示区域 --> <widget class="QTextBrowser" name="txtStatResult"> <property name="minimumSize"> <size> <width>0</width> <height>200</height> </size> </property> <property name="placeholderText"> <string>查询/统计结果将显示在此...</string> </property> </widget> </layout> <property name="title"> <string>查询统计</string> </property> </widget> <!-- 排序管理选项卡 --> <widget class="QWidget" name="tab_Sort"> <layout class="QVBoxLayout" name="layout_SortMain"> <layout class="QHBoxLayout" name="layout_SortBtns" spacing="30"> <item> <widget class="QPushButton" name="btnSortPrice"> <property name="text"> <string>按进价排序(升序)</string> </property> <property name="minimumSize"> <size> <width>150</width> <height>40</height> </size> </property> </widget> </item> <item> <widget class="QPushButton" name="btnSortDate"> <property name="text"> <string>按销售日期排序(最近优先)</string> </property> <property name="minimumSize"> <size> <width>150</width> <height>40</height> </size> </property> </widget> </item> </layout> <widget class="QLabel" name="label_SortTip"> <property name="text"> <string>注:排序后自动刷新对应表格数据</string> </property> <property name="styleSheet"> <string>color: #666; font-size: 12px;</string> </property> </widget> </layout> <property name="title"> <string>排序管理</string> </property> </widget> </widget> </item> </layout> </widget> <widget class="QMenuBar" name="menubar"> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>1200</width> <height>26</height> </rect> </property> <widget class="QMenu" name="menuFile"> <property name="title"> <string>文件</string> </property> <addaction name="actionSave"/> <addaction name="actionLoad"/> </widget> <addaction name="menuFile"/> </widget> <widget class="QStatusBar" name="statusbar"/> </widget> <action name="actionSave"> <property name="text"> <string>保存数据</string> </property> </action> <action name="actionLoad"> <property name="text"> <string>加载数据</string> </property> </action> <resources/> <connections/> </ui> ``` ### 关键设计说明: 1. **多选项卡结构**:使用`QTabWidget`实现四大核心功能模块(手机管理、销售管理、查询统计、排序)的分离,提升界面易用性。 2. **输入控件规范**: - 手机编号/型号/品牌使用`QLineEdit`,带输入提示(`placeholderText`)。 - 价格类控件使用`QDoubleSpinBox`(限制两位小数,最小值0),数量类使用`QSpinBox`(最小1)。 - 销售日期使用`QDateEdit`(支持日历弹窗,默认显示格式`yyyy-MM-dd`)。 3. **表格显示优化**: - 手机/销售表格(`tablePhoneList`/`tableSaleList`)设置交替行颜色(`alternatingRowColors`)提升可读性。 - 表头标签与功能需求完全匹配(如销售表格包含“销售日期”列)。 4. **按钮命名规范
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值