Qt基础教程V2.0:第七章:布局管理器

Qt基础教程V2.0:第七章:布局管理器

目录


一、目的

1、想提高Qt知识

2、想知道对话框QDialog

二、参考

1、

三、操作

1、这一章节需要动手练习一下里面的UI一些组件

2、完成:界面布局

登陆窗口

水平布局 和 垂直布局

默认widget和控件之间有9像素的间隙

灵活运用弹簧

3、下面都是创建的Widget项目

    //    //测试1:完成:单选按钮 默认选中 男
    //    ui->rBtnMan->setChecked(true);

    //    //测试2:完成:点击女的 就打印选中了
    //    connect(ui->rBtnWoman, &QRadioButton::clicked,[=](){
    //        qDebug() << "选中女的了!";
    //    });

    //    //测试3:完成:多选框 选中后打印内容
    //    //选中2 未选择0 tristate 1状态
    //    connect(ui->checkBox,&QCheckBox::stateChanged,[=](int state)
    //    {
    //        qDebug()<<state;
    //    });

    //    //测试4:完成:利用listWidget写诗
    //    QListWidgetItem *item=new QListWidgetItem("锄禾日当午");
    //    ui->listWidget->addItem(item);

    //    //测试5:完成:利用listWidget写诗,诗的内容是居中对齐
    //    QListWidgetItem *item=new QListWidgetItem("锄禾日当午");
    //    item->setTextAlignment(Qt::AlignHCenter);
    //    ui->listWidget->addItem(item);

//    //测试6:完成:使用QStringList来显示诗歌
//    QStringList list;
//    list<<"锄禾日当午"<<"汗滴禾下土"<<"谁知盘中餐"<<"粒粒皆辛苦";
//    ui->listWidget->addItems(list);

3、完成:Qt中给按钮添加图片

①总结:good:自己做出的,亲测有效

4、完成:使用Widget将RadioButton框选起来

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器

5、完成:让radioButton默认被选中

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
    //测试1:完成:单选按钮 默认选中 男
    ui->rBtnMan->setChecked(true);

6、完成:点击女的 就打印选中了

①注意中文

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
#pragma execution_character_set("utf-8")
    //测试2:完成:点击女的 就打印选中了
    connect(ui->rBtnWoman, &QRadioButton::clicked,[=](){
        qDebug() << "选中女的了!";
    });

7、完成:多选框 选中后打印内容

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
    //测试3:完成:多选框 选中后打印内容
    //选中2 未选择0 tristate 1状态
    connect(ui->checkBox,&QCheckBox::stateChanged,[=](int state)
    {
        qDebug()<<state;
    });

8、完成:利用listWidget写诗

①记得中文

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
#pragma execution_character_set("utf-8")
    //测试4:完成:利用listWidget写诗
    QListWidgetItem *item=new QListWidgetItem("锄禾日当午");
    ui->listWidget->addItem(item);

9、完成:利用listWidget写诗,诗的内容是居中对齐

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
    //测试5:完成:利用listWidget写诗,诗的内容是有排序的
    QListWidgetItem *item=new QListWidgetItem("锄禾日当午");
    item->setTextAlignment(Qt::AlignHCenter);
    ui->listWidget->addItem(item);

10、完成:使用QStringList来显示诗歌

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
    //测试6:完成:使用QStringList来显示诗歌
    QStringList list;
    list<<"锄禾日当午"<<"汗滴禾下土"<<"谁知盘中餐"<<"粒粒皆辛苦";
    ui->listWidget->addItems(list);

11、完成:treeWidget添加头

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器

12、完成:添加项目+添加顶层项目

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
    //测试2:完成:添加项目
    QTreeWidgetItem *liItem=new QTreeWidgetItem(QStringList()<<"力量");
    //添加顶层项目
    ui->treeWidget->addTopLevelItem(liItem);

13、完成:添加项目

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器

    //测试1:完成:treeWidget添加头
    ui->treeWidget->setHeaderLabels(QStringList()<<"英雄姓名"<<"英雄介绍");

    //测试2:完成:添加项目
    QTreeWidgetItem *liItem=new QTreeWidgetItem(QStringList()<<"力量");
    QTreeWidgetItem *minItem=new QTreeWidgetItem(QStringList()<<"敏捷");
    QTreeWidgetItem *zhiItem=new QTreeWidgetItem(QStringList()<<"智力");
    //添加顶层项目
    ui->treeWidget->addTopLevelItem(liItem);
    ui->treeWidget->addTopLevelItem(minItem);
    ui->treeWidget->addTopLevelItem(zhiItem);

14、完成:QTreeWidgetItem:添加内容

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器
  //测试1:完成:treeWidget添加头
    ui->treeWidget->setHeaderLabels(QStringList()<<"英雄姓名"<<"英雄介绍");

    //测试2:完成:添加项目
    QTreeWidgetItem *liItem=new QTreeWidgetItem(QStringList()<<"力量");
    QTreeWidgetItem *minItem=new QTreeWidgetItem(QStringList()<<"敏捷");
    QTreeWidgetItem *zhiItem=new QTreeWidgetItem(QStringList()<<"智力");
    //添加顶层项目
    ui->treeWidget->addTopLevelItem(liItem);
    ui->treeWidget->addTopLevelItem(minItem);
    ui->treeWidget->addTopLevelItem(zhiItem);

    //测试3:
    QStringList heroL1;
    QStringList heroL2;
    QStringList heroM1;
    QStringList heroM2;
    QStringList heroZ1;
    QStringList heroZ2;
    heroL1<<"钢背猪"<<"前排坦克,能在吸收伤害的同时造成可观的范围输出";
    heroL2<<"船长"<<"前排坦克,能肉能输出能控场的全能英雄";

    heroM1<<"月骑"<<"中排物理输出,可以使用分裂利刃攻击多个目标";
    heroM2<<"小鱼人"<<"前排战士,擅长偷取敌人的属性来增强自身战力";

    heroZ1<<"死灵法师"<<"前排法师坦克,魔法抗性较高,拥有治疗技能";
    heroZ2<<"巫医"<<"后排辅助法师,可以使用奇特的巫术诅咒敌人和治疗队友";

    //追加子项目,子项也是QTreeWidgetItem
    QTreeWidgetItem *li1=new QTreeWidgetItem(heroL1);
    liItem->addChild(li1);
    QTreeWidgetItem *li2=new QTreeWidgetItem(heroL2);
    liItem->addChild(li2);
    QTreeWidgetItem *min1=new QTreeWidgetItem(heroM1);
    minItem->addChild(min1);
    QTreeWidgetItem *min2=new QTreeWidgetItem(heroM2);
    minItem->addChild(min2);
    QTreeWidgetItem *zhi1=new QTreeWidgetItem(heroZ1);
    zhiItem->addChild(zhi1);
    QTreeWidgetItem *zhi2=new QTreeWidgetItem(heroZ2);
    zhiItem->addChild(zhi2);

第七章:布局管理器

所谓 GUI 界面,归根结底,就是一堆组件的叠加。我们创建一个窗口,把按钮放上面,把图标放上面,这样就成了一个界面。在放置时,组件的位置尤其重要。我们必须要指定组件放在哪里,以便窗口能够按照我们需要的方式进行渲染。这就涉及到组件定位的机制。

Qt 提供了两种组件定位机制:绝对定位和布局定位。

  1. 绝对定位就是一种最原始的定位方法:给出这个组件的坐标和长宽值。

这样,Qt 就知道该把组件放在哪里以及如何设置组件的大小。但是这样做带来的一个问题是,如果用户改变了窗口大小,比如点击最大化按钮或者使用鼠标拖动窗口边缘,采用绝对定位的组件是不会有任何响应的。这也很自然,因为你并没有告诉 Qt,在窗口变化时,组件是否要更新自己以及如何更新。或者,还有更简单的方法:禁止用户改变窗口大小。但这总不是长远之计。

  1. 布局定位:你只要把组件放入某一种布局,布局由专门的布局管理器进行管理。当需要调整大小或者位置的时候,Qt 使用对应的布局管理器进行调整。

布局定位完美的解决了使用绝对定位的缺陷。

Qt 提供的布局中以下三种是我们最常用的:

  1. QHBoxLayout:按照水平方向从左到右布局;
  2. QVBoxLayout:按照竖直方向从上到下布局;
  3. QGridLayout:在一个网格中进行布局,类似于 HTML 的 table;

7.1 系统提供的布局控件

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器

这4个为系统给我们提供的布局的控件,但是使用起来不是非常的灵活,这里就不详细介绍了。

7.2 利用widget做布局

第二种布局方式是利用控件里的widget来做布局,在Containers中

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器

在widget中的控件可以进行水平、垂直、栅格布局等操作,比较灵活。

再布局的同时我们需要灵活运用弹簧的特性让我们的布局更加的美观,下面是一个登陆窗口,利用widget可以搭建出如下登陆界面:

www.zeeklog.com  - Qt基础教程V2.0:第七章:布局管理器