C++Qt学习——QLineEdit、QDialog、QScrollArea、QTabWidget、QListWidget

在本文里面，主要介绍这几种控件的使用QLineEdit、QDialog、QScrollArea、QTabWidget、QListWidget。并且举例子。

目录

1、QLineEdit（仿QQ登录界面制作）

2、QDialog（仿支付对话框制作）

3、QScrollArea（仿面板滚动视图）

4、QTabWidget（面板切换效果）

5、QListWidget（仿QQ好友列表）

5.1、准备工作

5.2、编辑widget.ui。

6、代码分析

---

1、QLineEdit（仿QQ登录界面制作）

A、首先拖入Line Edit

B、在placeholderText里面输入内容

C、关于密码这一栏，我们设置echoMode为password

D、设置QlineEdit的样式表，没有边框

QLineEdit{
	border:none;
}

 E、添加Pushbutton，并且与对应的 LineEdit水平布局

F、将两个QLineEdit垂直布局

G、为了让效果更佳好一点，添加水平垂直弹簧。

H、创建qss文件，使得在悬停的时候有一个过度

QPushButton#pushButton {border-image: url(:/icons/pulldown.png)}
QPushButton#pushButton:hover {border-image: url(:/icons/pulldown_2.png)}

QPushButton#pushButton_2 {border-image: url(:/icons/login.png)}
QPushButton#pushButton_2:hover {border-image: url(:/icons/login_2.png)}

I、拖动窗口，发现不随窗体大小变化而变化

 J、最终效果展示

2、QDialog（仿支付对话框制作）

A、创建一个dialog项目

B、打开UI界面，因为要设置圆角（border-radius）QDialog不支持,所以我们拖入一个QFrame

C、设置样式表。

QFrame{
	background-color: white;
	border-radius:25px;
}

D、在界面拖入Label、Line Edit、PushButton，并调成自己满意的大小

E、设置水平垂直布局

F、取消pushbutton的样式表

QPushButton{
	color:#1E90FF;
	border-top:1px;
	border-right:1px;
	border-style:solid;
	border-color: #bbbbbb;
}

QPushButton:pressed{
	background-color:#dddddd;
	border-bottom-left-radius: 25px;
}

G、确定pushbutton的样式表

QPushButton{
	color:#1E90FF;
	border-top:1px;
	border-left:1px;
	border-style:solid;
	border-color: #bbbbbb;
}

QPushButton:pressed{
	background-color:#dddddd;
	border-bottom-right-radius: 25px;
}

取消确定控件触发函数

H、运行一下，发现不需要最上边的部分

I、打开dialog.cpp，设置边框隐藏和透明背景

J、查看效果

3、QScrollArea（仿面板滚动视图）

A、打开UI界面，拖入ScrollArea

B、设置大小为600，480

C、改变样式表

QScrollBar:vertical {
	width: 10px;
     background: white;
}

 QScrollBar::handle:vertical {
     background: rgba(200, 200, 200,50%);
	border-radius:15px;	
 }

QScrollBar::add-line:vertical {
	width:0px;
	height:0px;
 }

 QScrollBar::sub-line:vertical {
	width:0px;
	height:0px;
 }

 QScrollBar::handle:vertical:hover {
     background: rgba(200, 200, 200,80%);
 }

D、设置子文件的样式表

QWidget{
	background-color: white
}

E、根据需求，打开或者关闭横纵滚动条

F、注意：星耀出现滚动条的话，必须ScrollArea的宽或者高必须大于QWidget的宽高

4、QTabWidget（面板切换效果）

A、打开UI，拖入TabWidget

B、设置样式表

第一个是不需要边框

第二个是隐藏tab的高和宽

QTabWidget{
	border:none;
}

 QTabBar::tab {
	width:0px;
	height:0px;
}

C、拖入ListWidget

QListWidget{
	background-color:#dddddd;
	border:none;
}

QListWidget::item{
	height: 50px;
}

QListWidget::item:selected{
		background-color:white; 
		color: black;
}

D、双击，添加项目

E、将两个控件水平布局

F、设置TabWidget的首页

G、右键ListWidget转到槽

H、查看效果

5、QListWidget（仿QQ好友列表）

5.1、准备工作

A、创建QWidget文件，并基于该文件按创建子类

B、打开qqitem.ui,托入三个QLabel控件

C、拖入一个Widget，将控件放在里面，并于另一个QLabel做一个水平布局

D、水平弹簧的sizetype设置成Fixed

5.2、编辑widget.ui。

A、拖入控件，并水平垂直布局

B、QListWidget样式表

QListWidget::item{
	height:65px;
}

QListWidget::item:selected{
	background-color:rgb(200,200,200)
}

QListWidget::item:hover{
	background-color:rgb(220,220,220)
}

 C、LineEdit样式表

QLineEdit{
	background: transparent;
	border:none;
}

D、打开qqitem.h

 //多条记录插入的时候
     explicit QQItem(QString icon, bool flag, QString name_text, QWidget *parent = nullptr);

  E、打开qqitem.cpp

//做了多个接口
QQItem::QQItem(QString icon, bool flag, QString name_text, QWidget *parent) :
    QWidget(parent),
    ui(new Ui::QQItem)
{
    ui->setupUi(this);
//    QImage image(":/icons/icon1.png");
//    //image.scaled(ui->icon->width(),ui->icon->height())将图表显示一样大小
//    ui->icon->setPixmap(QPixmap::fromImage(image.scaled(ui->icon->width(),ui->icon->height())));
//    //右下角 phone
//    QImage image2(":/icons/phone.png");
//    ui->phone->setPixmap(QPixmap::fromImage(image2.scaled(ui->phone->width(),ui->phone->height())));

//    //设置名字
//    ui->name_text->setText("天下第一帅哥");
    QImage image(icon);
    //image.scaled(ui->icon->width(),ui->icon->height())将图表显示一样大小
    ui->icon->setPixmap(QPixmap::fromImage(image.scaled(ui->icon->width(),ui->icon->height())));
    //右下角 phone
    QImage image2(":/icons/phone.png");
    ui->phone->setPixmap(QPixmap::fromImage(image2.scaled(ui->phone->width(),ui->phone->height())));
    //手动控制手机是否可以显示
    ui->phone->setVisible(flag);
    //设置名字
    ui->name_text->setText(name_text);
}

 F、设置widget.cpp文件

//引用头文件
#include "qqitem.h"
#include <QListWidgetItem>
class QQItem;
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 铺满
    this->setLayout(ui->verticalLayout);
    //QQItem *qqItem= new QQItem(":/icons/icon1.png",true, "风子兰特",this);
    QQItem *qqItem0= new QQItem(":/icons/icon1.png",true, "风子兰特");
    QQItem *qqItem1= new QQItem(":/icons/icon2.png",false, "天下第一帅");
    QQItem *qqItem2= new QQItem(":/icons/icon3.png",true, "张三");

    QListWidgetItem*item0=new QListWidgetItem;
    QListWidgetItem*item1=new QListWidgetItem;
    QListWidgetItem*item2=new QListWidgetItem;

    ui->listWidget->addItem(item0);
    ui->listWidget->addItem(item1);
    ui->listWidget->addItem(item2);

    ui->listWidget->setItemWidget(item0,qqItem0);
    ui->listWidget->setItemWidget(item1,qqItem1);
    ui->listWidget->setItemWidget(item2,qqItem2);
}

 G、查看效果

6、代码分析

链接:https://pan.baidu.com/s/1CIzDK_8FXUuTcHqvtuhxEA 提取码: fann