逻辑助手

要使您的用户界面执行特定操作,您可能需要编写 JavaScript 表达式用于条件或转换数字为字符串。为了简化这一过程,Qt Design Studio 提供了一套名为 逻辑助手 的组件。

"Logic Helper component in Components"

逻辑助手允许您使用布尔运算符 AND、NOT 和 OR 来绑定属性值,以及用于映射数字和数字范围。此外,您还可以双向同步两个组件的属性值。

逻辑助手是一种不可见组件,您可以用它来与控件配合使用,如 滑块复选框。要使用逻辑助手,从 组件 > Qt Quick Studio Logic Helper 拖放它到 导航器。如果您在“组件”中找不到逻辑助手,您需要像在 添加和删除模块 中所述那样将“Qt Quick Studio Logic Helper”模块添加到您的项目中。

以下部分将详细介绍不同类型的逻辑助手。

布尔助手

您可以使用逻辑助手使用布尔运算符 AND、OR 和 NOT 来绑定属性值。

AND 运算符

AND 运算符 组件评估两个布尔输入。如果两个输入都是 true,则输出为 true

例如,我们可以使用两个复选框的选中状态来决定第三个复选框的选中状态。首先,我们将三个 复选框 组件和一个 AND 运算符 组件拖放到 导航器 中(1)。然后,我们选择 AND 运算符 组件实例(2),并在 属性 中设置其属性(3)。

我们选择输入01字段旁边的来显示操作菜单,然后点击设置绑定(4)来打开绑定编辑器(5)。在那里我们将AND运算符的input01属性绑定到第一个复选框的checked属性。然后,我们在输入02字段中做相同的事情,将input02属性绑定到第二个复选框的checked属性。

"AND operator properties"

最后,我们选择第三个复选框,并将其检查状态属性绑定到AND运算符的输出属性。

"Binding Checked property to Output property."

当我们在预览UI时,所有复选框最初都是未选中的。然而,当我们选择第一个和第二个复选框时,第三个复选框也会被选中。

OR运算符

或运算符组件与AND运算符做相同的事情,但如果一个或两个输入值为true,输出则为true

NOT运算符

非运算符组件在没有满足条件时会被评估为true

例如,我们可以指定如果一个复选框被选中,另一个不能被选中。首先,我们将两个复选框组件和一个非运算符组件拖放到导航器中。然后,我们选择非运算符组件实例,并在属性中设置其属性。在绑定编辑器中,我们将非运算符的input属性值绑定到其中一个复选框实例的checked属性值。

"NOT operator properties"

然后,我们选择另一个复选框实例,并将它的Checked字段值绑定到非运算符组件的输出字段值。

"Check box checked property bound to NOT operator output"

当我们预览UI时,第二个复选框最初是选中的。然而,当我们选择第一个复选框时,第二个复选框会自动清除。

双向绑定

双向绑定组件将两个控制项的值绑定在一起,以便当一个值改变时,另一个值也随之改变。此组件可以用于同步两个滑块或一个滑块和一个复选框。通常,它用于将后端值绑定到一个控制项,如滑块。

例如,为了同步两个滑块的值,我们将两个滑块组件和一个双向绑定组件拖放到导航器中的同一父组件。然后,我们选择双向绑定实例,并在属性中设置其属性。

"Bi-directional binding properties"

目标01目标02字段中,输入您想要绑定的组件的ID。在属性01属性02字段中,输入要同步的属性名称。在我们的示例中,我们将两个滑块组件的value属性绑定在一起,以便当我们在预览中移动一个滑块手柄时,另一个滑块也随之移动。

如果您想添加显示滑块值的文本字段,可以使用字符串映射器组件。

字符串映射器

字符串映射器组件将数字映射到字符串。首先,您需要在字符串映射器的input属性和您想要从中获取值的控制对象的value属性之间添加一个绑定。然后,您在字符串映射器的text属性和将要显示字符串的组件之间添加一个绑定。

例如,要使用一个文本组件来显示滑动条的值,我们将文本滑动条字符串映射器组件拖放到同一个父组件中。然后,我们在导航器中选择字符串映射器实例以在属性中显示其属性。在那里,我们将输入字段的值绑定到滑动条实例的value属性的值。

"Binding slider value property to string mapper"

接下来,我们选择文本实例,并将文本字段的值绑定到字符串映射器组件的输出文本字段(text属性)。

"Binding text property value to string mapper"

当我们移动预览中的滑动条手柄时,文本组件中显示的值会相应地改变。

小数位数字段的值决定了小数分隔符后面的数字位数。

最小-最大映射器

即使输入值超出范围,最小-最大映射器组件也有输出值。这使得您可以在值低于最小值或高于最大值的情况下应用操作,例如更改状态中的颜色。

要访问控制值的值,请将最小-最大映射器的Input属性绑定到该控件的value属性。

例如,要限制滑动条的最高值不超过0.60,无论滑动条属性中设置的值是多少,我们将最小-最大映射器拖放到我们上面的示例中。我们选择它以在属性中显示其属性。然后,我们将映射器的Input属性值绑定到滑动条的value属性的值,并将Max字段的值设置为0.60。

"Binding slider value property to string mapper"

为了通过文本组件显示最大值,我们选择字符串映射器组件并更改刚才设置的绑定,将Input字段的值从slider.value更改为minMaxMapper.output

"Binding string mapper input to min max mapper"

当我们移动预览中的滑动条手柄时,它只能移动到0.60的值。

Input字段的值超出范围时,Out of rangeAbove maxBelow min复选框设置为true

例如,在速度的背景下,如果Above max设置为true,则表示太快;如果Below min设置为true,则表示太慢;如果Out of range设置为true,则表示要么太快,要么太慢

范围映射器

范围映射器组件将数值范围映射到另一个范围,以便第二个范围的输出值跟随原始范围的输入值。这在重新映射时间轴上的当前帧时非常有用。

"Range Mapper properties"

输入最小值输入最大值输出最小值输出最大值字段中指定最小和最大输入和输出值,以及在输出字段中的原始值。

例如,我们可以指定滑动条的值从0到1。如果我们想显示从10到100的值,我们可以将字段的值绑定到范围映射器组件的输入最小值输入最大值字段。然后我们将输出最小值字段的值设置为10,将输出最大值字段的值设置为100。

"Binding range mapper minimum input to slider.from property"

当我们移动预览中的滑动条手柄,使从滑动条组件的输入值从0变为1时,输出值从10变为100。

结合多个逻辑助手

您可以将相同类型或不同类型的多个逻辑助手组合起来,以定义应用程序逻辑。

例如,我们创建了一个用于销售商品的小型应用程序。我们使用一个范围映射器组件来设置价格范围,并使用最小最大映射器组件创建一个受阻范围(当价格过低或过高时),以及一个不良值范围(当价格低于或高于现行价值时)。然后我们使用与运算符组件来确定值是否低于最小值或高于最大值。

我们使用一个字符串映射器组件来将滑动条值映射到显示价格的文本组件,就像在字符串映射器中所述。

要定义从0到1000的价格范围,我们将范围映射器组件的输入属性绑定到滑动条值,并将价格范围的输入最大值在输入最大值字段中设置为1000。默认情况下,最小输入值为0,因此我们不需要更改它。

"Range Mapper properties"

接下来,我们使用两个最小最大映射器组件创建一个受阻范围(在受阻范围内,销售按钮将被隐藏)和一个不良值范围(通过更改销售提示的文本和颜色来鼓励或不鼓励销售)。

对于受阻范围,我们将最小-最大映射器的输入属性绑定到范围映射器组件的输出值,并在最大字段中指定最大输入值。

"Blocked range mapper properties"

我们使用两个与运算符组件来确定当值在受阻范围内时,销售按钮应该隐藏。我们通过将输入02字段的值绑定到最小-最大映射器的输出范围字段的评估结果来实现这一点。我们指定当值不在范围之外时,评估结果为

"Under value minimum-maximum mapper Input 02"

对于underValueAnd运算符,我们还将输入01字段的值绑定到不良值范围的最小-最大映射器的以下最小值字段。对于overValueAnd运算符,我们将其绑定到相同映射器的以上最大值字段。

"Under value minimum-maximum mapper Input 01"

我们现在可以评估最小最大映射器与运算符组件的值,以及应用不同的状态,显示不同的按钮文本和销售提示。为此,我们创建状态并设置它们的when条件。

首先,我们创建一个 tooLow 状态,并将 when 条件设置为在阻止范围内的 Min Max Mapper 组件的 Below min 字段的值评估为 true 时应用该状态。

"Setting when condition of tooLow state"

对于位于量表另一端的 tooHigh 状态,我们将 when 条件设置为在阻止范围的 Min Max Mapper 组件的 Above max 字段的值评估为 true 时应用该状态。

接下来,我们指定当 underValue 状态的 Output 字段的值评估为 true 时应用该状态。

"Setting when condition of underValue state"

对于 overValue 状态,我们将 when 条件设置为当 overValueAnd 组件的 Output 字段的值评估为 true 时应用该状态。

在我们预览我们的应用程序时,我们可以看到滑块值改变时应用的状态。

逻辑助手摘要

以下表格总结了可用的逻辑助手。

图标逻辑助手描述
AND 操作符布尔 AND。
双向绑定双向绑定,同时在两个方向上绑定两个值并保持它们同步。
Min Max Mapper将一个数字映射到具有最小值和最大值的另一个数字。
非操作符布尔 NOT。
OR 操作符布尔 OR。
范围映射器将数值范围映射到另一个范围,以便第二个范围的输出值跟随原始范围的输入值。
字符串映射器将数字映射到具有定义精度的字符串。

在某些 Qt 许可下提供。
了解更多。