Qt入门 【ui设计】

目录

  • ui界面介绍
    • UI界面demo
    • 标签总结

ui界面介绍

Qt入门 【ui设计】_第1张图片

  • Layouts: 布局管理器,组件在水平垂直方向布局。
  • Spacers:分割器,在水平方向进行分割,便于拉伸或者压缩。
  • Buttons:各种各样的按钮
  • ltem Views (Model-Based) 图像显示有关的各种视图
  • Item Widgets (Ite m-Based) 列表框(表格、树状列表、横向列表)
  • Containers:容器(可以把其他所有的组件嵌套进容器中)
  • Input Widgets:带有输入功能的组件,获取键盘输入的信息
  • Display Widgets:各种具有显示功能的组件

UI界面demo

  • 设计展示标题(label标签),调整Layout属性视图。
    Qt入门 【ui设计】_第2张图片

  • 通过属性视图font选项,设计标题属性,调整字体大小和字体字样

Qt入门 【ui设计】_第3张图片

  • geometry 设置坐标和宽、高。
    Qt入门 【ui设计】_第4张图片

标签总结

Layout

  • 标签常用的属性:
    • 1、geometry 设置位置坐标,设置宽度和高度。
    • 2、font :设置标签上字体大小和字样

lineedit

  • 单行输入框 lineedit : 参上。
  • lineedit 空间中的placeholderT… 属性可以设置控件提示信息
    Qt入门 【ui设计】_第5张图片
    隐藏提示信息, 将echoMode设置为PassWord,就可以隐藏密码信息,
  • 注意:echoMode默认不隐藏需要自己设置。
    Qt入门 【ui设计】_第6张图片
    效果:
    Qt入门 【ui设计】_第7张图片
  • maxlength可以限制输入框的信息长度
    Qt入门 【ui设计】_第8张图片

PushButton

  • 普通按钮:PushButton: 参上。

改变按钮属性: 右击PushButton按钮中的样式修改,跳转到样式编辑表。

Qt入门 【ui设计】_第9张图片

给按钮键添加背景图片

1、将Resource File文件添加进工程中,

Qt入门 【ui设计】_第10张图片

2、设置资源文件存储路径,点击Add按钮设置图片存储路径。

Qt入门 【ui设计】_第11张图片

  • 将文件资源添加进/new/prefix1中。

Qt入门 【ui设计】_第12张图片

  • 编辑登录按钮的样式表

Qt入门 【ui设计】_第13张图片

你可能感兴趣的:(QT,ui,qt,开发语言)