11_QT学习笔记_(常用控件、树形窗口、登录界面设计)

01 ui设计界面常用控件介绍

布局

• Vertical Layout 垂直布局
• Horizontal Layout 水平布局
• Grid Layout 网格布局
• Form Layout 表单布局

弹簧

• Horizontal Spacer 水平弹簧
• Vertical Spacer 垂直弹簧

按钮

• Push Button 普通按钮
• Tool Button 工具按钮
• Radio Button 单选按钮

• Check Box 多选按钮
• Dialog Button Box 对话框按钮

窗口

• List Widget 列表窗口
• Tree Widget 树形窗口
• Table Widget 表单窗口

02 Push Button与Tool Button

Push Button一般为普通按钮，而Tool Button更适合做图标按钮。
分别为两种按钮添加图标
选中对象按钮后，在右下角找到属性-icon，点击下拉箭头-选择资源(来自事先添加的资源文件)

选中对象按钮后，在右下角找到属性-iconSize，调整图标的大小来适应按钮。

分别为Push Button和Tool Button添加完图标，Tool Button按钮的图标占满整个控件，比Push Button更适合做图标按钮。

Tool Button按钮图标显示类型
选中对象按钮后，在右下方找到QToolButton-toolButtonStyle，可以设置图标显示类型。

• ToolButtonIconOnly
• ToolButtonTextOnly
• ToolButtonTextBesideIcon
• ToolButtonTextUnderIcon
• ToolButtonFollowStyle

ToolButtonTextBesideIcon效果如下:

ToolButtonTextUnderIcon效果如下:

03 Radio Button与Check Box

Radio Button为单选按钮，Check Box为多选按钮。

04 Command Link Button与Dialog Button Box

Command Link Button使用较少，Dialog Button Box为对话框按钮，成对使用。

05 List Widget

List Widget为列表窗口。

06 Tree Widget(ui实现)

Tree Widget为树形窗口，包含列与项目。一般先添加列，后添加项目

在已有项目的基础上，可以再添加子项目。

07 Tree Widget(代码实现)

首先在ui设计界面，拖拽添加一个空Tree Widget控件，其次通过代码创建列(标头)与项目。

树形窗口添加列或标头的两种方式:
方式一:
创建QStringList类型对象，利用append()函数尾插添加标头文本，最后利用treeWidget对象的接口函数setHeaderLabels()添加标头。
方法二：
直接调用treeWidget对象的接口函数setHeaderLabels()，并利用匿名对象作为函数参数。其中<<符号已被重载，相当于append()，并且可以实现连续添加。

为树形窗口添加列表项与子项:
添加列表项:
创建QTreeWidgetItem*类型对象，并利用匿名对象进行初始化。最后调用treeWidget对象的接口函数addTopLevelItem()添加列表项。
为列表项添加子项:
与添加列表项类似，先创建QTreeWidgetItem*类型对象，再调用QTreeWidgetItem对象的接口函数addChild()添加子项。

#include "Mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->actionopen->setIcon(QIcon(":/icon_01/Imag_File/06.png"));

    //树形窗口新建标头
    //方法一:
    QStringList strLi;
    strLi.append("名称");
    strLi.append("类型");
    strLi.append("详细介绍");
    //ui->treeWidget->setHeaderLabels(strLi);

    //方法二:
    ui->treeWidget->setHeaderLabels(QStringList()<<"名称"<<"类型"<<"详细介绍");

    //添加列表项
    QTreeWidgetItem* chunyang = new QTreeWidgetItem(QStringList()<<"纯阳"<<"根骨"<<"法术攻击为主");
    QTreeWidgetItem* tiance = new QTreeWidgetItem(QStringList()<<"天策"<<"力量"<<"天策府-大唐守卫者");
    ui->treeWidget->addTopLevelItem(chunyang);
    ui->treeWidget->addTopLevelItem(tiance);

    //为列表项添加子项
    QStringList li;
    li<<"紫气"<<"根骨"<<"远程爆发";
    QTreeWidgetItem* test = new QTreeWidgetItem(li);
    chunyang->addChild(test);

}

MainWindow::~MainWindow()
{
    delete ui;
}

代码运行结果如下所示：

08 常用输入栏控件

• Combo Box 下拉框输入
• Font Combo Box 文字下拉框输入
• Line Edit 行输入框
  

09 登录界面布局

水平布局：
1.在ui设计界面里，拖拽新建一个空窗口(Widget)。
2.选中“登录”和“注册”两个按钮，拖拽添加到该空窗口中。
3.选中空窗口后，点击上方工具栏或则右侧的水平布局(Horizontal Layout)，即可实现水平布局。
4.为了调整两个按钮间距，并保证按钮控件大小不随布局变化大小，拖拽新建一个水平弹簧控件(Horizontal Spacer)，添加到两个按钮之间。
栅格布局：
1.同理，将两个label控件和两个行输入框lineEdit添加到空窗口中。
2.选中窗口后，点击上方工具栏或则右侧的栅格布局(Grid Layout)，即可实现栅格布局。
实现效果如下图所示：

锁死窗口大小：
1.ui实现: 选中窗口对象后，在下方的sizePolicy中，将“水平策略”和“垂直策略”由原先的Preferred改为Fixed，如下图所示。
2.代码实现: 利用函数setFixedSize(长，宽)，即可实现。

利用弹簧，调节控件相对位置：
1.弹簧的使用，只能是建立在布局之上。
2.通过弹簧可以确保控件大小不变，仅调节控件相对位置。
3.选择弹簧控件(Spacer)，在sizeHint中调整宽度，改变弹簧长度。

密码输入设置：
1.行输入框，设置输入文本提示：在QLineEdit下方的placeholderText中，输入“请输入用户名”。
2.输入密码隐藏设置：在QLineEdit下方的echoMode中，将Normal改为Password，即可。
3.QLineEdit下方的echoMode中：

• Normal：正常显示
• Password: 密码输入显示为黑色圆点
• NoEcho：输入完全隐藏
• PasswordEchoOnEdit: 输入时正常显示，离开焦点后显示为黑点。

提示标签文本设置：
在QLabel下方的alignment中，水平的项设置为AlignRight，即右对齐

最终实现效果如下：