QT(ui控件、布局以及常用样式表)

1.创建带UI界面的


一般不在这操作,都是用代码操作

在这里操作的时候,先点击“Signals &Slots Editor” 再点击“+”,就可以改变UI的布局文件。

2.Containers

容器类(见文知意,英语翻译即可)

eg:Scroll Area 滑动空间,是放不开空间时,上下现实的。

Stacked Widget:

3.stackedWidget

实例:

    拖入stackedwidget,右击,添加页

            拖入按钮 ,右击转到槽,选择clicked,跳转到

void MainWindow::on_change_clicked()

{

        static int i = 0;

        ui->stackedWidget->setCurrentIndex(  ++i %4);

}

4.Combo Box 

    下拉框

5.Font Combo Box

    字体选择

6.lineEdit 的设置

    //    设置内容

    ui->lineEdit->setText("123456");

      //设置内容显示间隙

    ui->lineEdit->setTextMargins(15,0,0,0);

    //    设置内容显示方式

    ui->lineEdit->setEchoMode(QLineEdit::Password);

    //

    QStringList list;//新建list

    list << "hello" << "how are you" << "herher";//向list中添加文字

    QCompleter *com  = new QCompleter(list,this);//建list模型

    com->setCaseSensitivity(QT::CaseInsensitive);//模型忽略大小写

    ui->lineEdit->setCompleter(com);

7.Label 标签

文字:ui->labelText->setText("hello");

图片:

(1)代码实现 ui->labelImage->setPixmap(QPixmap("路径"));

//让图片自适应大小

ui->labelImage->setScaledContents(ture);

(2)ui界面内实现,在右下角之前按键改名字的地方,有“QLabel”-->“pixmap”点击,然后选择资源,

动画:

头文件  #include

//创建动画

QMovie *myMovie = new QMove("路径");

//启动动画

myMovie->start();

//自适应大小

ui->labelImage->setScaledContents(ture);

网页链接

//设置html  引号 里是html语言

ui->labelUrl->setText("

百度一下

");

ui->labelUrl->setOpenExternalLinks(true);

8.日历

    Calendar Wigdets

9.数码管

ui->lcdNumber->display(123);

10.进度条

ui->progressBar->setMinimum(0);//设置最小值

ui->progressBar->setMaxmum(200);//设置最大值

ui->progressBar->setValue(100);//设置当前值

11.QWebView(5.4之后不支持)

ui->webView_2->load(QUrl("http://www.baidu.com"));


11.


选择要布局的按钮或者按完其他的,再进行布局。

布局属性:

layoutSpacing是相互间的间隔。

layoutLeftMargin:

layoutRightMargin:

layoutTopMargin:

layoutBottomMargin:

改颜色

this->label->setStyleSheet("QLabel{color:red;}");

通过RGB改颜色

ui->label->setStyleSheet("QLabel{color:rgb(0,255,255);"

                                                                           "background-color:red;"//改背景色

                                                                            "}");

注意:上述代码中this与ui的区别,this相当于模板,新建一个QLabel就会显示为red,而ui相当于个例,仅仅设置自己的。

12.裁剪照片

QPushButton{

    border-width: 4px;

    border-image: url(button.png) 4 4 4 4 stretch stretch;//将button.png的图片向四个方向裁剪,然后stretch(伸缩)。

}

13.处理伪状态

pressed:  部件被鼠标按下

hover:    鼠标位于部件上

ui->pushButton->setStyleSheet("QPushButton{"

                                                                           "border-image:url(:/new/prefixl/image/Sunny.jpg);}"

                                                                           "QPushButton:hover{"

                                                                            "border-image:url(:/new/prefixl/image/Su.png)}"

                                                                            "QPushButton:pressed{"

                                                                             "border-image:url(:/new/prefixl/image/Sun.png)}"

                                                                                );

你可能感兴趣的:(QT(ui控件、布局以及常用样式表))