查看完整版本: [-- Qml之FileDialog问题 --]

QTCN开发网 -> Qt QML开发 -> Qml之FileDialog问题 [打印本页] 登录 -> 注册 -> 回复主题 -> 发表主题

songhuirong1 2019-05-07 09:12

Qml之FileDialog问题

用Qml编写了一个程序,程序中用到了选择文件的功能,于是使用了FileDialog,但是在我的手机里显示异常。请问如何解决。代码如下:
  1. import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Dialogs 1.2

    Window {
        visible: true
        color: "black"

        onWidthChanged: {
            mask.recalc()
        }

        onHeightChanged: {
            mask.recalc()
        }

        Image {
            id: source
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            visible: false
            asynchronous: true

            onStatusChanged: {
                if(Image.Ready == status) {
                    console.log("image loaded")
                    mask.recalc()
                }
            }
        }

        FileDialog {
            id: fileDialog
            title: "Please choose an Image File."
            nameFilters: ["Image Files (*.jpg *.png *.gif)"]

            onAccepted: {
                source.source = fileUrl
            }
        }

        Canvas {
            id: forSaveCanvas
            width: 128
            height: 128
            contextType: "2d"
            visible: false
            z: 2
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.margins: 4

            property var imageData: null

            onPaint: {
                if(null != imageData) {
                    context.drawImage(imageData, 0, 0)
                }
            }

            function setImageData(data) {
                imageData = data
                requestPaint()
            }
        }

        Canvas {
            id: mask
            anchors.fill: parent
            z: 1
            property real w: width
            property real h: height
            property real dx: 0
            property real dy: 0
            property real dw: 0
            property real dh: 0
            property real frameX: 66
            property real frameY: 66

            function calc() {
                var sw = source.sourceSize.width
                var sh = source.sourceSize.height

                if(sw > 0 && sh > 0) {
                    if(sw <= w && sh <= h) {
                        dw = sw
                        dh = sh
                    } else {
                        var sRadio = sw / sh
                        dw = sRadio * h

                        if(dw > w) {
                            dh = w / sRadio
                            dw = w
                        } else {
                            dh = h
                        }
                    }

                    dx = (w - dw) / 2
                    dy = (h - dh) / 2
                }
            }

            function recalc() {
                calc()
                requestPaint()
            }

            function getImageData() {
                return context.getImageData(frameX - 64, frameY - 64, 128, 128)
            }

            onPaint: {
                var ctx = getContext("2d")

                if(dw < 1 && dh < 1) {
                    ctx.fillStyle = "#0000a0"
                    ctx.font = "20pt sans-serif"
                    ctx.textAlign = "center"
                    ctx.fillText("Please Choose An Image File", width / 2, height / 2)

                    return
                }

                ctx.clearRect(0, 0, width, height)
                ctx.drawImage(source, dx, dy, dw, dh)
                var xStart = frameX - 66
                var yStart = frameY - 66
                ctx.save()
                ctx.fillStyle = "#a0000000"
                ctx.fillRect(0, 0, w, yStart)
                var yOffset = yStart + 132
                ctx.fillRect(0, yOffset, w, h - yOffset)
                ctx.fillRect(0, yStart, xStart, 132)
                var xOffset = xStart + 132
                ctx.fillRect(xOffset, yStart, w - xOffset, 132)

                ctx.strokeStyle = "red"
                ctx.fillStyle = "#00000000"
                ctx.lineWidth = 2
                ctx.beginPath()
                ctx.rect(xStart, yStart, 132, 132)
                ctx.fill()
                ctx.stroke()
                ctx.closePath()
                ctx.restore()
            }
        }

        MultiPointTouchArea {
            anchors.fill: parent
            minimumTouchPoints: 1
            maximumTouchPoints: 1
            touchPoints: [
                TouchPoint {
                    id: point1
                }
            ]

            onUpdated: {
                mask.frameX = point1.x
                mask.frameY = point1.y
                mask.requestPaint()
            }

            onReleased: {
                forSaveCanvas.setImageData(mask.getImageData())
                actionPanel.visible = true
            }

            onPressed: {
                actionPanel.visible = false
            }
        }

        Component {
            id: flatButton

            ButtonStyle {
                background: Rectangle {
                    implicitWidth: 70
                    implicitHeight: 30
                    color: control.pressed ? "#a0a0a0" : "#707070"
                    border.width: control.hovered ? 2 : 1
                    border.color: control.hovered ? "#c0c0c0" : "#909090"
                }

                label: Text {
                    anchors.fill: parent
                    font.pointSize: 12
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    text: control.text
                    color: (control.hovered && !control.pressed) ? "blue" : "white"
                }
            }
        }

        Row {
            id: actionPanel
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            spacing: 8
            z: 5

            Button {
                style: flatButton
                text: "Open"

                onClicked: {
                    fileDialog.open()
                }
            }

            Button {
                style: flatButton
                text: "Save"

                onClicked: {
                    forSaveCanvas.save("selected.png")
                    actionPanel.visible = false
                }
            }

            Button {
                style: flatButton
                text: "Cancel"

                onClicked: {
                    actionPanel.visible = false
                }
            }
        }
    }

手机运行截图如下:
[attachment=20273]


20091001753 2019-05-07 19:09
异常是因为你把字体弄得太大了。

songhuirong1 2019-05-08 08:24
20091001753:异常是因为你把字体弄得太大了。 (2019-05-07 19:09) 

代码并没有设置字体大小,FileDialog好像没有font属性吧

20091001753 2019-05-08 11:35
你发的代码里,搜索 font 就有2处:
ctx.font = "20pt sans-serif"
font.pointSize: 12

建议你淘宝购买 qml 的入门书籍,边看边练

songhuirong1 2019-05-08 13:02
20091001753:你发的代码里,搜索 font 就有2处:
ctx.font = "20pt sans-serif"
font.pointSize: 12
建议你淘宝购买 qml 的入门书籍,边看边练 (2019-05-08 11:35) 

这个不是设置FileDialog的字体的,我写过一个简单demo,里面只有一个open按钮,点击按钮就只是简单的打开FileDialog,什么操作也没有,结果显示也是这样的,这个跟字体没有关系的。

songhuirong1 2019-05-08 13:17
20091001753:你发的代码里,搜索 font 就有2处:
ctx.font = "20pt sans-serif"
font.pointSize: 12
建议你淘宝购买 qml 的入门书籍,边看边练 (2019-05-08 11:35) 

我写了一段简单的代码,如下:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2

Window {
    visible: true
    title: qsTr("Hello World")

    FileDialog {
        id: fileDlg
        title: qsTr("Open File")
        nameFilters: [qsTr("All file(*.*)")]
    }

    Button {
        anchors.centerIn: parent
        text: qsTr("Open")

        onClicked: {
            fileDlg.open()
        }
    }
}
这里没有设置任何字体,显示也一样有问题。所以这个跟字体没有关系,应该跟FileDialog的实现有关,FileDialog是跟系统相关的


查看完整版本: [-- Qml之FileDialog问题 --] [-- top --]



Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled