theme: channing-cyan
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
📒博客首页：何名取 的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！
页面切换
本节看完你将学会：
- 使用UI的状态
- 使用信号和事件处理程序
前言
登录界面制作-状态是本系列教程的第三节，该系列教程将说明如何使用Qt Design Studio使用一些基本的UI组件(如页面、按钮和输入框)创建一个简单的UI。本节描述了如何使用状态向UI添加第二个页面。在第一页，用户可以输入用户名和密码登录。在第二页，用户可以注册。
因为第二个页面将包含与登录页面相同的大部分UI组件，所以当用户选择Create Account按钮时，将根据需要使用状态来显示和隐藏UI组件。
添加UI组件
这里需要添加另一个输入框，用于验证用户为创建帐户而输入的密码。
- 双击打开Screen01.ui.qml跳转到Form Editor编辑页面
- 拖拽EntryField组件到Navigator中的fields列中
- 编辑Component > ID为repeatPassword
- 设置Button Content > Text为Repeat Password
- 选择File > Save或按Ctrl+S保存更改
接下来，将为登录页面和帐户创建页面添加状态，使用visibility属性隐藏登录页面上的重复密码字段和帐户创建页面上的Create account按钮。
使用状态来模拟页面更改
- 在States视图中，选择Create New State
- 输入login作为状态名
- Navigator中选择repeatPassword以在Properties中显示其属性
- 在Visibility部分中，取消选择Visible复选框以隐藏登录状态中的确认密码输入框
- 在States中，选择login名字左侧的设置按钮登录以打开Actions菜单，然后选择Set as Default以确定在应用程序启动时应用登录状态
- 点击选中base state状态，再次添加一个新状态命名为createAccount
- 在Navigator中选择createAccount以在属性中显示其属性
- 在Visibility部分中，取消选择Visible复选框以隐藏帐户创建状态中的创建帐户按钮
- 选择File > Save或按Ctrl+S保存更改
状态
特定可视化组件的状态是一组信息，描述了可视化组件的各个部分在其中如何显示以及在何处显示，以及与该状态相关的所有数据。UI中的大多数可视化组件都有数量有限的状态，每个状态都有完整定义的属性。
例如，一个列表项可以被选中，也可以不被选中，如果被选中，它可能是当前活动的单个选择，也可能是选择组的一部分。这些状态中的每一种都可能具有特定的相关视觉外观(中性的、突出显示的、扩展的，等等)。
使用者可以应用状态来触发行为或动画。UI组件通常具有一个默认状态，该状态包含组件的所有初始属性值，因此对于在状态更改之前管理属性值非常有用。
也可以通过添加新状态来指定其他状态。组件中的每个状态都有一个惟一的名称。要更改组件的当前状态，可以将state属性设置为状态的名称。可以使用when属性将状态更改绑定到条件。
接下来将要创建连接，用来实现单击登录页面上的create Account按钮将触发帐户创建页面的转换。
将按钮连接到状态
组件有预定义的信号，当用户与UI交互时发出。PushButton组件包含一个鼠标区域组件，它有一个点击信号。当鼠标在该区域内被点击时，信号就会发出。
现在，您将使用连接视图将createAccount按钮的点击信号连接到createAccount状态:
- 选择View > Views > Connection View，打开“Connections”视图。
- 在Navigator中选择createAccount
- 在Connections选项卡中，选择添加按钮以添加createAccount的onClicked信号
- 双击值Action列，在下拉菜单中选择Change state to createAccount
- 选择File > Save或按Ctrl+S保存更改
信号和事件处理程序
UI组件需要相互通信。例如，一个按钮需要知道用户已经点击了它。作为响应，按钮可以改变颜色来指示它的状态并执行一个操作。
为此，使用信号和处理程序机制，其中信号是通过信号处理程序响应的事件。当发出信号时，将调用相应的信号处理程序。在处理程序中放置逻辑(例如脚本或其他操作)允许组件响应事件。