QML控件类型：Pane、Frame、Page、ScrollView、ToolBar

Pane

一、描述

继承自 Control 。窗格提供与应用程序样式和主题相匹配的背景颜色。

声明为 Pane 子项的项自动成为 Pane 的 contentItem 的父项。动态创建的项目需要明确地作为 contentItem 的父级。

二、内容大小

如果在 Pane 中仅使用单个子项，它将调整大小以适应其所包含项目的隐式大小。这使得它特别适合与布局一起使用。

Pane {
    ColumnLayout {
        anchors.fill: parent
        CheckBox { text: qsTr("E-mail") }
        CheckBox { text: qsTr("Calendar") }
        CheckBox { text: qsTr("Contacts") }
    }
}

如果有两个子项：

Pane {
    SwipeView {
        // ...
    }
    PageIndicator {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
    }
}

在这种情况下，Pane 无法计算合理的隐式大小。将 PageIndicator 锚定在 SwipeView 上，可以简单地将内容大小设置为 view 的隐式大小：

Pane {
    contentWidth: view.implicitWidth
    contentHeight: view.implicitHeight

    SwipeView {
        id: view
        // ...
    }
    PageIndicator {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
    }
 }

如果 contentItem 没有隐式大小且只有一个子项，则 Pane 将使用该子项的隐式大小。例如：

Pane {
    Item {
        Rectangle {
            implicitWidth: 200
            implicitHeight: 200
            color: "salmon"
        }
    }
}

二、属性成员

1、contentChildren : list<Item>

内容子项的列表。

该列表包含已在 QML 中声明为 Pane 子项的所有项。

注意：与 contentData 不同，contentChildren 不包含非可视 QML 对象。

2、【default】contentData : list<QtObject>

内容数据列表。

该列表包含已在 QML 中声明为窗格子级的所有对象。

contentData 包含非可视 QML 对象。

3、contentHeight : real / contentWidth : real

保存内容高度、宽度。用于计算 Pane 的总隐式高度、宽度。

---

Frame

一、描述

继承自 Pane。用于在可视框架内将一组逻辑控件布局在一起。Frame 不提供自己的布局，需要自行定位其内容。

声明为 Frame 的子项的项自动成为 Frame 的 contentItem 的父项。动态创建的项目需要明确地作为 contentItem 的父级。

如果在 Frame 中仅使用单个项目，它将调整大小以适应其包含项目的隐式大小。 这使得它特别适合与布局一起使用。

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Frame {
        ColumnLayout {
            anchors.fill: parent
            CheckBox { text: qsTr("E-mail") }
            CheckBox { text: qsTr("Calendar") }
            CheckBox { text: qsTr("Contacts") }
        }
    }
}

二、自定义 Frame 示例

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Frame {
        background: Rectangle {
            color: "transparent"
            border.color: "#21be2b"
            radius: 2
        }

        Label {
            text: qsTr("Content goes here!")
        }
    }
}

 

---

Page

一、描述

Page 继承自 Pane。可以方便地向页面添加页眉和页脚项。

声明为 Page 子项的项目：

• 自动作为页面的 contentItem 的父级。动态创建的项目需要明确地作为 contentItem 的父级。
• 不会自动定位或调整大小。

二、属性成员

1、footer : Item

页脚项。位于底部，并调整为页面宽度。默认值为空。

将 ToolBar、TabBar 或 DialogBu​​ttonBox 指定为页脚会自动将相应的 ToolBar::position、TabBar::position 或 DialogBu​​ttonBox::position 属性设置为 Footer。

2、header : Item

页眉项。位于顶部，并根据页面宽度调整大小。默认值为空。

将 ToolBar、TabBar 或 DialogBu​​ttonBox 指定为页眉会自动将相应的 ToolBar::position、TabBar::position 或 DialogBu​​ttonBox::position 属性设置为 Header。

3、【只读】implicitFooterHeight : real

隐式页脚高度。等于 footer && footer.visible ? footer.implicitHeight : 0。

4、【只读】implicitFooterWidth : real

隐式页脚宽度。等于 footer && footer.visible ? footer.implicitHeight : 0。

5、【只读】implicitHeaderHeight : real

隐式页眉高度。等于 header && header.visible ? header.implicitHeight : 0。

6、【只读】implicitHeaderWidth : real

隐式页眉宽度。等于 header && header.visible ? header.implicitWidth : 0。

7、title : string

页面标题。

标题通常显示在页面顶部，以向用户提供有关他们正在查看的页面的上下文。

页面不呈现标题本身，而是依赖应用程序来完成。例如：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    visible: true
    width: 400
    height: 400

    header: Label {
        text: view.currentItem.title
        horizontalAlignment: Text.AlignHCenter
    }

    SwipeView {
        id: view
        anchors.fill: parent

        Page {
            title: qsTr("Home")
        }
        Page {
            title: qsTr("Discover")
        }
        Page {
            title: qsTr("Activity")
        }
    }
}

 

---

ScrollView

一、描述

ScrollView 是为用户定义的内容提供滚动区域的控件。继承自 Pane。

演示了 ScrollView 的简单用法：

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ScrollView {
        width: 200
        height: 200

        Label {
            text: "ABC"
            font.pixelSize: 224
        }
    }
}

如果在 ScrollView 中仅使用单个项目，则内容大小将根据其包含项目的隐式大小自动计算。但是，如果使用了多个项目（或未提供隐式大小），则 contentWidth 和 contentHeight 属性必须设置为其包含项目的组合大小。

如果内容大小小于或等于 ScrollView 的大小，将无法滚动。

如果希望 ScrollView 仅垂直滚动，可以将 contentWidth 绑定到 availableWidth（对于 contentHeight 反之亦然）。

1.1、滚动条

可以使用 ScrollBar.horizontal 和 ScrollBar.vertical 附加属性访问和自定义水平和垂直滚动条。

以下示例调整滚动条策略，使水平滚动条始终处于关闭状态，而垂直滚动条始终处于打开状态：

ScrollView {
    // ...
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
}

1.2、触摸与鼠标交互

在触摸时，ScrollView 启用轻弹并使滚动条非交互。 

当与鼠标设备交互时，轻弹被禁用并且滚动条是交互的。

通过将 interactive 属性分别显式设置为 true 或 false，可以使滚动条在触摸时为交互式，或在与鼠标设备交互时为非交互式。

ScrollView {
    // ...
    ScrollBar.horizontal.interactive: true
    ScrollBar.vertical.interactive: true
}

二、属性成员

1、contentChildren : list<Item>

内容子项的列表。该列表包含已在 QML 中声明为视图子项的所有项目。

与 contentData 不同，contentChildren 不包含非可视 QML 对象。

2、【默认】contentData : list<QtObject>

内容数据列表。该列表包含已在 QML 中声明为视图子项的所有对象。

包含非可视 QML 对象。

---

ToolBar

一、描述

ToolBar 继承自 Pane，工具栏，通常用作 ApplicationWindow 的页眉或页脚。

ToolBar 不提供自己的布局，需要自行定位其内容。如果在 ToolBar 中仅使用单个项目，它将调整大小以适应其包含项目的隐式大小。这使得它特别适合与布局一起使用。

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    visible:true

    header: ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {
                text: qsTr("←")
                onClicked: stack.pop()
            }
            Label {
                text: "标题"
                elide: Label.ElideRight
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }
            ToolButton {
                text: qsTr("→")
                onClicked: menu.open()
            }
        }
    }

    StackView {
        id: stack
        anchors.fill: parent//注意这里
        Label {
            text: "ABC"
            font.pixelSize: 224
        }
    }
}

二、属性成员

1、position : enumeration

工具栏的位置。默认值是特定于样式的。

如果工具栏被指定为 ApplicationWindow 或 Page 的页眉或页脚，则会自动设置适当的位置。

• ToolBar.Header：位于顶部，作为页眉。
• ToolBar.Footer：位于底部，作为页脚。