Qt Design Studio教程(3)登录界面制作-状态

admin 2022年11月3日18:54:00安全开发评论15 views1875字阅读6分15秒阅读模式

页面切换

本节看完你将学会:

  1. 使用UI的状态

  2. 使用信号和事件处理程序

前言

登录界面制作-状态是本系列教程的第三节,该系列教程将说明如何使用Qt Design Studio使用一些基本的UI组件(如页面、按钮和输入框)创建一个简单的UI。本节描述了如何使用状态向UI添加第二个页面。在第一页,用户可以输入用户名和密码登录。在第二页,用户可以注册。

因为第二个页面将包含与登录页面相同的大部分UI组件,所以当用户选择Create Account按钮时,将根据需要使用状态来显示和隐藏UI组件。

添加UI组件

这里需要添加另一个输入框,用于验证用户为创建帐户而输入的密码。

  1. 双击打开Screen01.ui.qml跳转到Form Editor编辑页面

  2. 拖拽EntryField组件到Navigator中的fields列中

  3. 编辑Component > ID为repeatPassword

  4. 设置Button Content > Text为Repeat Password

  5. 选择File > Save或按Ctrl+S保存更改

Qt Design Studio教程(3)登录界面制作-状态

接下来,将为登录页面和帐户创建页面添加状态,使用visibility属性隐藏登录页面上的重复密码字段和帐户创建页面上的Create account按钮。

使用状态来模拟页面更改

  1. 在States视图中,选择Create New State

  2. 输入login作为状态名

  3. Navigator中选择repeatPassword以在Properties中显示其属性

  4. 在Visibility部分中,取消选择Visible复选框以隐藏登录状态中的确认密码输入框

  5. 在States中,选择login名字左侧的设置按钮登录以打开Actions菜单,然后选择Set as Default以确定在应用程序启动时应用登录状态

Qt Design Studio教程(3)登录界面制作-状态

  1. 点击选中base state状态,再次添加一个新状态命名为createAccount

  2. 在Navigator中选择createAccount以在属性中显示其属性

  3. 在Visibility部分中,取消选择Visible复选框以隐藏帐户创建状态中的创建帐户按钮

  4. 选择File > Save或按Ctrl+S保存更改

状态

特定可视化组件的状态是一组信息,描述了可视化组件的各个部分在其中如何显示以及在何处显示,以及与该状态相关的所有数据。UI中的大多数可视化组件都有数量有限的状态,每个状态都有完整定义的属性。

例如,一个列表项可以被选中,也可以不被选中,如果被选中,它可能是当前活动的单个选择,也可能是选择组的一部分。这些状态中的每一种都可能具有特定的相关视觉外观(中性的、突出显示的、扩展的,等等)。

使用者可以应用状态来触发行为或动画。UI组件通常具有一个默认状态,该状态包含组件的所有初始属性值,因此对于在状态更改之前管理属性值非常有用。

也可以通过添加新状态来指定其他状态。组件中的每个状态都有一个惟一的名称。要更改组件的当前状态,可以将state属性设置为状态的名称。可以使用when属性将状态更改绑定到条件。

接下来将要创建连接,用来实现单击登录页面上的create Account按钮将触发帐户创建页面的转换。

将按钮连接到状态

组件有预定义的信号,当用户与UI交互时发出。PushButton组件包含一个鼠标区域组件,它有一个点击信号。当鼠标在该区域内被点击时,信号就会发出。

现在,您将使用连接视图将createAccount按钮的点击信号连接到createAccount状态:

  1. 选择View > Views > Connection View,打开“Connections”视图。

  2. 在Navigator中选择createAccount

  3. 在Connections选项卡中,选择添加按钮以添加createAccount的onClicked信号

  4. 双击值Action列,在下拉菜单中选择Change state to createAccount

  5. 选择File > Save或按Ctrl+S保存更改

Qt Design Studio教程(3)登录界面制作-状态

信号和事件处理程序

UI组件需要相互通信。例如,一个按钮需要知道用户已经点击了它。作为响应,按钮可以改变颜色来指示它的状态并执行一个操作。

为此,使用信号和处理程序机制,其中信号是通过信号处理程序响应的事件。当发出信号时,将调用相应的信号处理程序。在处理程序中放置逻辑(例如脚本或其他操作)允许组件响应事件。


作者:何名取
链接:https://juejin.cn/post/7102218444401016868
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


原文始发于微信公众号(汇编语言):Qt Design Studio教程(3)登录界面制作-状态

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年11月3日18:54:00
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  Qt Design Studio教程(3)登录界面制作-状态 http://cn-sec.com/archives/1388342.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: