QML 中的 ScrollView 和 Canvas

Question

美好的一天！我正在尝试使用 Canvas 在不同的选项卡中显示多个图表。图表的比例会比显示的实际尺寸大一些，所以我想使用 ScrollView。将此代码放在多个文件中：

main.qml:

TabView {
    id: tabView
    Layout.alignment: Qt.AlignCenter
    Layout.fillWidth: true
    Layout.fillHeight: true

    Tab1 {
        id: tab1
    }

    //...
}

Tab1.qml:

Tab {
    active: true

    function init()
    {
        item.plot.requestPaint()
    }

    ScrollView {
        property var plot: _plot
        Plot {
            width: 3000
            id: _plot
        }
    }
}

Plot.qml:

Canvas {
    function draw()
    {
        console.log("draw go")
        var ctx = getContext("2d")
        ctx.reset()

        //...
    }

    onPaint: {
        draw()
    }
}

在某个时刻，函数 init() 被调用。

问题是当使用 ScrollView 信号时 Paint 没有被调用。没有 ScrollView 一切正常。控制台中不会出现错误。

Qt 5.4.1

Answer 1

你需要给你的Canvas一个身高：

import QtQuick 2.4
import QtQuick.Window 2.0
import QtQuick.Controls 1.2

Window {
    id: window
    visible: true
    width: 300
    height: 300

    ScrollView {
        anchors.fill: parent

        Canvas {
            width: 3000
            height: window.height
            onPaint: {
                console.log("draw go")
            }
        }
    }
}

这让我有点困惑，因为 documentation says:

Only one Item can be a direct child of the ScrollView and the child is implicitly anchored to fill the scroll view.

但接着又说：

The width and height of the child item will be used to define the size of the content area.

这似乎是自相矛盾的陈述。

QML 中的 ScrollView 和 Canvas

ScrollView and Canvas in QML

qt

canvas

scrollview

qml