十三、控件

1.QLineEdit单行输入框

1.1 示例仿登录界面

 

 2.QDialog对话框

2.1 属性

　　Modal：如果为true时，弹出此对话框，其他界面变黑不可点击。

　　setWindowFlag(Qt::FramelessWindowHint);设置对话框失去上边的状态栏。

　　setAttribute(Qt::WA_TranslucentBackground)：设置窗体透明。

2.2 示例仿支付界面

 部分代码

    this->setWindowFlag(Qt::FramelessWindowHint);//隐藏标题栏
    this->setModal(true);//其他窗口变灰，不可点
void MDialog::on_pushButton1_clicked()
{
    this->close();
}

void MDialog::on_pushButton2_clicked()
{
    QString str1 = ui->lineEdit1->text();
    if(str1 == "123456"){
        ui->label1->setText("Success成功");
        ui->label1->setStyleSheet("color: black;");
    }else{
        ui->label1->setText("Failed失败");
        ui->label1->setStyleSheet("color: red;");
    }
}

 3.QScrollArea滚动区域

3.1 出现滚动条

　　scrollArea的widget大小比scrollArea的大小要大时会出现滚动条。

　　可以设置verticalScrollBarPolicy/horizontalScrollBarPolicy属性来决定什么时候显示滚动条。

3.2 改变滚动条样式（垂直方向）

样式代码：

QScrollBar:vertical {
    background: white;
    padding: 0px 0px 0px 0px;
    border: 3px solid #eeffff;
}

QScrollBar::handle:vertical{
    background: rgba(220,220,220,80%);
    border-radius: 10px;
}

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

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

效果：

 注意事项：改变QScrollArea的背景是改变其下QWidget的样式。

4.QTabWidget和QStackedWidget面板切换效果

4.1 样式改变

每个视图下有几个页面便是有几个QWidget，修改单个页面的样式是修改QWidget的样式。

4.1.1  改变状态栏

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

设置前

设置后

4.2 常用属性

tabsCloseable属性为true则显示关闭按钮，同时需要设置removeTab(int index)属性来实现点击关闭视图。

currentIndex属性决定当前是第几页

tabPosition属性决定状态栏显示的位置

4.3 配合QListWidget示例

 5.QListWidget列表视图

5.1 属性

focusPolicy：默认焦点设置

添加项：addItem

移除项：takeItem

插入项（在某项的前边插入）：insertItem

5.2 信号

currentRowChanged：当前行发生变化触发此信号。

5.3 页面控件封装

5.3.1 Ctrl+n新建文件，选择QT文件下的QT设计师界面类。

 5.3.2 选择界面模板，这里选择Widget来进行设计。

 5.3.3 设置新添加的类名和要添加到哪个项目中

 5.3.4 添加完新文件后，可以打开ui文件进行简单的组件设计。

 5.3.5 在cpp文件中进行操作，然后在主cpp文件中创建对象，添加进主界面的ListWidget中。

（一）新建文件中将图片设置进label中显示模拟头像

    QImage image1(urlAddr);
    ui->label->setPixmap(QPixmap::fromImage(image1).scaled(30,30));

（二）主cpp文件中向ListWidget中添加item并设置item的widget

    QQItem *qqItem = new QQItem(":/image/cat.jpeg");

    QListWidgetItem *item1=new QListWidgetItem;
    ui->listWidget->addItem(item1);
    ui->listWidget->setItemWidget(item1,qqItem);

（三）效果展示