本篇主要介绍利用代码和手动的方式创建和调整一个UI界面并进行布局调整。
关于代码实现UI界面的一些总结: (1)设置window/dialog对象的最小尺寸、title
setMinimumSize(800, 600); setWindowTitle(tr("My Dialog"));
(2)对于水平或者垂直布局,"addWidget(widget对象)"用于包含widget类的控件(不知道是不是widget查看父类这些)、"addLayout(布局)"用于包含布局; (3)"布局->setMargin(); 布局->setStretch(对象1,展现时比例); 布局->setStretch(对象2,展现时比例);"调整布局关系;
MainLayout->setMargin(2); //距离widget边沿距离为2 MainLayout->setStretch(0,1); //第一个对象与第二个对象展现时比例为1 MainLayout->setStretch(1,1); //第二个对象与第一个对象展现时比例为1
(4)在调整好布局包含关系后,切记布局都是要有对象的,即依赖的widget类对象,使用"widget类对象->setLayout(布局)"即可实现依赖关系或者说是加入widget的对象树中;另外还需要设置widget在关窗后自动销毁及是否为模态对话框的设置。
this->setLayout(MainLayout); //设置widget的布局属性 this->setAttribute(Qt::WA_DeleteOnClose);//窗口关闭后,自动释放内存 this->setModal(true); //设置是否为模态对话框 true模态 默认false 非模态
(5)实现以下界面的方法 代码如下:
Widget::Widget(QWidget *parent) : QWidget(parent) { initUI(); } void Widget::initUI() { m_buttonWrite = new QPushButton(QString::fromLocal8Bit("写入数据")); m_buttonStop = new QPushButton(QString::fromLocal8Bit("停止数据读入")); QHBoxLayout *operLayout = new QHBoxLayout; operLayout->addWidget(m_buttonWrite); operLayout->addWidget(m_buttonStop); operLayout->addStretch(); QVBoxLayout *layout = new QVBoxLayout; layout->addLayout(operLayout); setLayout(layout); //默认使用的是this指针,指向Widget对象 }
以下为手动布局的详情: 总结放于前: 好看的界面需要使用widget包含控件,对几行几列的使用栅格、水平、垂直、弹簧。代码实现是先生成控件对象,然后将控件摆放到widget中。
1. 首先创建一个带UI的工程文件,创建时的设置如下: (1)状态栏移除 此处生成的是一个mainwindow的界面,对于你不想要的状态栏等,可以在右侧中选中,右键选择移除即可。 只剩下一个QWidget (2)利用label控件,创建一个登录名 (3)LineEdit控件创建一个输入框 同理创建出密码和按钮,但是这个时候创建出来的控件位置这些都是固定的,不会随着窗口大小而自适应。 (4)利用widget进行布局。 比较推荐的布局方式是利用widget进行布局,将控件拖入widget控件之中,这个时候看到widget里还是比较乱的。 (5)选择水平布局: 瞬间感觉好看很多 同理对其他的控件也是用widget进行布局,得到: (6)对整体来个竖直方向布局: 虽然可以随着界面变化,看起来不美观,需要再进行调整。 调整一下整体的大小 (7)利用弹簧进行调整相对位置 (8)弹簧固定值设置 加弹簧后虽然可以跟随界面变化,但是按钮之间距离太大了,这个时候需要将中间弹簧设置为一个定值,这样就不会出现这样的问题了。 弹簧距离设置为定值 都加上弹簧之后的效果 (9)如何打破整体布局,取消了弹簧效果: 2. 利用栅格进行布局 (1)取消之后再添加一个widget,将“用户名”和“密码”拖入其中,因为两个可以看做两行两列的空间布局,因此选中这个widget,点击“栅格布局”。 (2)然后选中最大的那个widget,选择“垂直布局”,发现既对齐又布局会好很多。 (3)加弹簧并去除widget与控件之间空隙 再加上弹簧后的效果,但是垂直方向距离比较大,这是因为左侧每个widget与控件之间有很大空隙,怎么去除这些间隙呢? 选中widget,右侧中选中“sizePolicy”下的垂直策略,选中"Fixed" 同理操作下边的widget,再增加弹簧之后,效果如下: 至此,界面布局已经完成。 3. 如何进行属性设置? (1)改变主窗口的名 (2)固定窗口大小设置 (3)设置margin属性 后来你会发现弹簧或者控件和widget有一定的间隔,这个参数即为margin,可以设置为0 (4)密码控件处暗码显示 4.学习视频地址:登录窗口布局(手动布局、widget、行列形式的用栅格、弹簧调整控件与widget距离)