• 4595阅读
  • 5回复

[提问]Qml之FileDialog问题 [复制链接]

上一主题 下一主题
离线songhuirong1
 

只看楼主 倒序阅读 楼主  发表于: 2019-05-07
用Qml编写了一个程序,程序中用到了选择文件的功能,于是使用了FileDialog,但是在我的手机显示异常。请问如何解决。代码如下:
  1. import QtQuick 2.9
  2. import QtQuick.Window 2.2
  3. import QtQuick.Controls 1.4
  4. import QtQuick.Controls.Styles 1.4
  5. import QtQuick.Dialogs 1.2
  6. Window {
  7.     visible: true
  8.     color: "black"
  9.     onWidthChanged: {
  10.         mask.recalc()
  11.     }
  12.     onHeightChanged: {
  13.         mask.recalc()
  14.     }
  15.     Image {
  16.         id: source
  17.         anchors.fill: parent
  18.         fillMode: Image.PreserveAspectFit
  19.         visible: false
  20.         asynchronous: true
  21.         onStatusChanged: {
  22.             if(Image.Ready == status) {
  23.                 console.log("image loaded")
  24.                 mask.recalc()
  25.             }
  26.         }
  27.     }
  28.     FileDialog {
  29.         id: fileDialog
  30.         title: "Please choose an Image File."
  31.         nameFilters: ["Image Files (*.jpg *.png *.gif)"]
  32.         onAccepted: {
  33.             source.source = fileUrl
  34.         }
  35.     }
  36.     Canvas {
  37.         id: forSaveCanvas
  38.         width: 128
  39.         height: 128
  40.         contextType: "2d"
  41.         visible: false
  42.         z: 2
  43.         anchors.top: parent.top
  44.         anchors.right: parent.right
  45.         anchors.margins: 4
  46.         property var imageData: null
  47.         onPaint: {
  48.             if(null != imageData) {
  49.                 context.drawImage(imageData, 0, 0)
  50.             }
  51.         }
  52.         function setImageData(data) {
  53.             imageData = data
  54.             requestPaint()
  55.         }
  56.     }
  57.     Canvas {
  58.         id: mask
  59.         anchors.fill: parent
  60.         z: 1
  61.         property real w: width
  62.         property real h: height
  63.         property real dx: 0
  64.         property real dy: 0
  65.         property real dw: 0
  66.         property real dh: 0
  67.         property real frameX: 66
  68.         property real frameY: 66
  69.         function calc() {
  70.             var sw = source.sourceSize.width
  71.             var sh = source.sourceSize.height
  72.             if(sw > 0 && sh > 0) {
  73.                 if(sw <= w && sh <= h) {
  74.                     dw = sw
  75.                     dh = sh
  76.                 } else {
  77.                     var sRadio = sw / sh
  78.                     dw = sRadio * h
  79.                     if(dw > w) {
  80.                         dh = w / sRadio
  81.                         dw = w
  82.                     } else {
  83.                         dh = h
  84.                     }
  85.                 }
  86.                 dx = (w - dw) / 2
  87.                 dy = (h - dh) / 2
  88.             }
  89.         }
  90.         function recalc() {
  91.             calc()
  92.             requestPaint()
  93.         }
  94.         function getImageData() {
  95.             return context.getImageData(frameX - 64, frameY - 64, 128, 128)
  96.         }
  97.         onPaint: {
  98.             var ctx = getContext("2d")
  99.             if(dw < 1 && dh < 1) {
  100.                 ctx.fillStyle = "#0000a0"
  101.                 ctx.font = "20pt sans-serif"
  102.                 ctx.textAlign = "center"
  103.                 ctx.fillText("Please Choose An Image File", width / 2, height / 2)
  104.                 return
  105.             }
  106.             ctx.clearRect(0, 0, width, height)
  107.             ctx.drawImage(source, dx, dy, dw, dh)
  108.             var xStart = frameX - 66
  109.             var yStart = frameY - 66
  110.             ctx.save()
  111.             ctx.fillStyle = "#a0000000"
  112.             ctx.fillRect(0, 0, w, yStart)
  113.             var yOffset = yStart + 132
  114.             ctx.fillRect(0, yOffset, w, h - yOffset)
  115.             ctx.fillRect(0, yStart, xStart, 132)
  116.             var xOffset = xStart + 132
  117.             ctx.fillRect(xOffset, yStart, w - xOffset, 132)
  118.             ctx.strokeStyle = "red"
  119.             ctx.fillStyle = "#00000000"
  120.             ctx.lineWidth = 2
  121.             ctx.beginPath()
  122.             ctx.rect(xStart, yStart, 132, 132)
  123.             ctx.fill()
  124.             ctx.stroke()
  125.             ctx.closePath()
  126.             ctx.restore()
  127.         }
  128.     }
  129.     MultiPointTouchArea {
  130.         anchors.fill: parent
  131.         minimumTouchPoints: 1
  132.         maximumTouchPoints: 1
  133.         touchPoints: [
  134.             TouchPoint {
  135.                 id: point1
  136.             }
  137.         ]
  138.         onUpdated: {
  139.             mask.frameX = point1.x
  140.             mask.frameY = point1.y
  141.             mask.requestPaint()
  142.         }
  143.         onReleased: {
  144.             forSaveCanvas.setImageData(mask.getImageData())
  145.             actionPanel.visible = true
  146.         }
  147.         onPressed: {
  148.             actionPanel.visible = false
  149.         }
  150.     }
  151.     Component {
  152.         id: flatButton
  153.         ButtonStyle {
  154.             background: Rectangle {
  155.                 implicitWidth: 70
  156.                 implicitHeight: 30
  157.                 color: control.pressed ? "#a0a0a0" : "#707070"
  158.                 border.width: control.hovered ? 2 : 1
  159.                 border.color: control.hovered ? "#c0c0c0" : "#909090"
  160.             }
  161.             label: Text {
  162.                 anchors.fill: parent
  163.                 font.pointSize: 12
  164.                 horizontalAlignment: Text.AlignHCenter
  165.                 verticalAlignment: Text.AlignVCenter
  166.                 text: control.text
  167.                 color: (control.hovered && !control.pressed) ? "blue" : "white"
  168.             }
  169.         }
  170.     }
  171.     Row {
  172.         id: actionPanel
  173.         anchors.horizontalCenter: parent.horizontalCenter
  174.         anchors.bottom: parent.bottom
  175.         anchors.bottomMargin: 20
  176.         spacing: 8
  177.         z: 5
  178.         Button {
  179.             style: flatButton
  180.             text: "Open"
  181.             onClicked: {
  182.                 fileDialog.open()
  183.             }
  184.         }
  185.         Button {
  186.             style: flatButton
  187.             text: "Save"
  188.             onClicked: {
  189.                 forSaveCanvas.save("selected.png")
  190.                 actionPanel.visible = false
  191.             }
  192.         }
  193.         Button {
  194.             style: flatButton
  195.             text: "Cancel"
  196.             onClicked: {
  197.                 actionPanel.visible = false
  198.             }
  199.         }
  200.     }
  201. }

手机运行截图如下:


离线20091001753

只看该作者 1楼 发表于: 2019-05-07
异常是因为你把字体弄得太大了。
(づ ̄ 3 ̄)づ
离线songhuirong1

只看该作者 2楼 发表于: 2019-05-08
回 20091001753 的帖子
20091001753:异常是因为你把字体弄得太大了。 (2019-05-07 19:09) 

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

只看该作者 3楼 发表于: 2019-05-08
你发的代码里,搜索 font 就有2处:
ctx.font = "20pt sans-serif"
font.pointSize: 12

建议你淘宝购买 qml 的入门书籍,边看边练
(づ ̄ 3 ̄)づ
离线songhuirong1

只看该作者 4楼 发表于: 2019-05-08
回 20091001753 的帖子
20091001753:你发的代码里,搜索 font 就有2处:
ctx.font = "20pt sans-serif"
font.pointSize: 12
建议你淘宝购买 qml 的入门书籍,边看边练 (2019-05-08 11:35) 

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

只看该作者 5楼 发表于: 2019-05-08
回 20091001753 的帖子
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是跟系统相关的
快速回复
限100 字节
 
上一个 下一个