页面切换
本节看完你将学会：
使用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组件需要相互通信。例如，一个按钮需要知道用户已经点击了它。作为响应，按钮可以改变颜色来指示它的状态并执行一个操作。
为此，使用信号和处理程序机制，其中信号是通过信号处理程序响应的事件。当发出信号时，将调用相应的信号处理程序。在处理程序中放置逻辑(例如脚本或其他操作)允许组件响应事件。
作者：何名取
链接：https://juejin.cn/post/7102218444401016868
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
原文始发于微信公众号（汇编语言）：Qt Design Studio教程（3）登录界面制作-状态
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论