qt - QtQuick/QML 中对 ScrollBar 语法的正确理解是什么？

Question

最近，我使用了带有 TableView 的 Scrollbar。我提到 QML documentation for ScrollBar我可以看到一个例子:

Flickable {
    focus: true

    Keys.onUpPressed: scrollBar.decrease()
    Keys.onDownPressed: scrollBar.increase()

    ScrollBar.vertical: ScrollBar { id: scrollBar }
}

我以为 ScrollBar.vertical 是 bool 变体，但为什么冒号后面有一个对象 ScrollBar { id: scrollBar }？

是否有任何关于此语法的文档？

使用有什么区别

1. ScrollBar.vertical: ScrollBar { id: scrollBar }
   

   和

2. ScrollBar { id: scrollBar; orientation: Qt.Vertical }
   

我对下面的代码产生了同样的困惑:

Flickable {
    anchors.fill: parent

    contentWidth: parent.width * 2
    contentHeight: parent.height * 2

    ScrollBar.horizontal: ScrollBar { id: hbar; active: vbar.active }
    ScrollBar.vertical: ScrollBar { id: vbar; active: hbar.active }
}

在anchors.fill: parent这一行，anchors是小写的。

Answer 1

I thought that ScrollBar.vertical is a bool variant, but why there is an object ScrollBar { id: scrollBar } after the colon?

答案很简单，因为 ScrollBar.vertical 既不是 bool 也不是变体，而是 ScrollBar 的类型。这在文档中有说明。

ScrollBar.vertical : ScrollBar

This property attaches a vertical scroll bar to a Flickable.

Flickable {
    contentHeight: 2000
    ScrollBar.vertical: ScrollBar { }
}

注意子标题告诉我们冒号后的类型:ScrollBar。

是否有任何关于此语法的文档？

是的。我从 this page 复制了以上内容.

使用[...]有什么区别

我将遍历每一行令人困惑的代码，并用其名称标记每一行。

//  Attached Property
ScrollBar.vertical: ScrollBar { id: scrollBar }

//  Child Object
ScrollBar { id: scrollBar; orientation: Qt.Vertical }

//  Grouped Property
anchors.fill: parent

让我们逐一分析。

附加属性

Attached properties [...] are mechanisms that enable objects to be annotated with extra properties or signal handlers that are otherwise unavailable to the object. In particular, they allow objects to access properties or signals that are specifically relevant to the individual object.

References to attached properties [...] take the following syntax form:

<AttachingType>.<propertyName>

For example, the ListView type has an attached property ListView.isCurrentItem that is available to each delegate object in a ListView. This can be used by each individual delegate object to determine whether it is the currently selected item in the view:

import QtQuick 2.0
   
ListView {
    width: 240; height: 320
    model: 3
    delegate: Rectangle {
        width: 100; height: 30
        color: ListView.isCurrentItem ? "red" : "yellow"
    }
}

In this case, the name of the attaching type is ListView and the property in question is isCurrentItem, hence the attached property is referred to as ListView.isCurrentItem.

^(source)

在我们的特定情况下，ScrollBar 是附加类型，vertical 是属性。

请记住，ListView.isCurrentItem 和 ScrollBar.vertical 之间存在一些差异。前者是 bool 类型，后者是 ScrollBar 类型。此外，前者是一个只读 属性，这意味着我们无法分配或更改它。另一方面，您可以分配给 ScrollBar.vertical。

如果 ListView.isCurrentItem 不是只读的，我们可以像对 ScrollBar.vertical 那样分配它。

delegate: Rectangle {
    ListView.isCurrentItem: true
}

但由于它是只读的，因此会引发错误。

子对象

这是 QML 基础知识。这是一个例子:

ApplicationWindow {
    visible: true
    width: 800; height: 600
    
    //  child object of ApplicationWindow
    Rectangle { 
        width: 200; height: 200
        color: "red"

        //  child object of Rectangle
        Text { text: "Hello World" }
    }
    
    //  child object of ApplicationWindow
    Rectangle {
        x: 400
        width: 200; height: 200
        color: "blue"
    }
}

回过头来看ScrollBar:

Flickable {
    ScrollBar { id: scrollBar; orientation: Qt.Vertical }
}

这将实例化一个子对象 ScrollBar 但仅此而已。无附加功能。

分组属性

In some cases properties contain a logical group of sub-property attributes. These sub-property attributes can be assigned to using either the dot notation or group notation.

For example, the Text type has a font group property. Below, the first Text object initializes its font values using dot notation, while the second uses group notation:

Text {
    // dot notation
    font.pixelSize: 12
    font.b: true
}

Text {
    // group notation
    font { pixelSize: 12; b: true }
}

^(source)

分组属性的另一个常见示例是 anchors(您可能已经注意到)。

不要让点符号让您感到困惑。尝试找出以下两个属性之间的一般差异:

anchors.top
ScrollBar.vertical

重要的区别是属性必须以小写字母开头，而QML 类型以大写字母开头。考虑到这一点，我们可以看到 anchors 显然是一个属性，而 ScrollBar 是一个类型。

---

有了这些，我认为我们可以尝试解决另一个问题。

为什么使用附加属性而不是将 ScrollBar 定义为子对象？

因为更好的自动化。来自文档:

When ScrollBar is attached vertically or horizontally to a Flickable, its geometry and the following properties are automatically set and updated as appropriate:

• orientation
• position
• size
• active

An attached ScrollBar re-parents itself to the target Flickable. A vertically attached ScrollBar resizes itself to the height of the Flickable, and positions itself to either side of it based on the layout direction. A horizontally attached ScrollBar resizes itself to the width of the Flickable, and positions itself to the bottom.

^(source)

这让您可以专注于其他事情，而不用担心滚动条的位置。

当然，将 ScrollBar 实例化为子对象(非附加)也有它的优点。

It is possible to create an instance of ScrollBar without using the attached property API. This is useful when the behavior of the attached scroll bar is not sufficient or a Flickable is not in use. [...]

When using a non-attached ScrollBar, the following must be done manually:

• Layout the scroll bar (with the x and y or anchor properties, for example).
• Set the size and position properties to determine the size and position of the scroll bar in relation to the scrolled item.
• Set the active property to determine when the scroll bar will be visible.

^(source)