使用Item 自定义Dialog，解决 qml 自带输入法不能输入问题

//自定义item dialog 代码如下：

import QtQuick 2.0
Item {

    id: dialogComponent

    anchors.fill: parent

    property alias titleText: titleLabel.text

    property alias cancelText: cancelButton.text

    property alias okText: okButton.text

    property Component contentItem:null

    property alias contentComponent:contentComponent
    property bool showFooter: true
    signal accept()

    signal reject()

    // Add a simple animation to fade in the popup
    // let the opacity go from 0 to 1 in 400ms
    PropertyAnimation { target: dialogComponent; property: "opacity";
        duration: 400; from: 0; to: 1;
        easing.type: Easing.InOutQuad ; running: true }

    // backgroud
    // This rectange is the a overlay to partially show the parent through it
    // and clicking outside of the 'dialog' popup will do 'nothing'
    Rectangle {
        anchors.fill: parent

        id: overlay
        color: "#000000"
        opacity: 0.2
        // add a mouse area so that clicks outside
        // the dialog window will not do anything
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("backGroud clicked")
            }
        }
    }

    // dialog 区域
    // This rectangle is the actual popup
    Rectangle {
        id: dialogWindow
        width: parent.width * 0.7
        implicitHeight:headerItem.implicitHeight + implicitHeight+40

        height: Math.min(implicitHeight, parent.height * 0.8)

        color: '#232732'
        anchors.centerIn: parent
        focus: true

        // title 头
        Item{

            id: headerItem
            width: parent.width
            implicitHeight: (titleText === ''  0 : titleLabel.implicitHeight + 40)
            DefaultText {
                id: titleLabel
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.topMargin: 20
            }

        }
        // 中间文本
        Item{
            id : content
            width: parent.width
            anchors.top: headerItem.bottom
            anchors.topMargin: 20

            anchors.bottom: footerItem.top
            Loader{
                id : contentComponent
                anchors.top: content.top
                anchors.bottom: content.bottom
                anchors.left: content.left
                anchors.right: content.right
                sourceComponent:contentItem
            }
        }

        // 底部
        Item {
            id: footerItem
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            width: parent.width

            visible: showFooter
            implicitHeight: (showFooter  cancelButton.implicitHeight + 40 : 0)

            DefaultButton {
                id: cancelButton
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.top: parent.top
                anchors.topMargin: 20
                width: footerItem.width / 2 - 30
                text: qsTr('取 消')
                onClicked: {
                    console.log("cancel clicked")
                    reject()
                }
            }

            DefaultButton {
                id: okButton

                anchors.right: parent.right
                anchors.rightMargin: 20

                anchors.top: parent.top

                anchors.topMargin: 20
                width: footerItem.width / 2 - 30

                text: qsTr('确 认')

                onClicked: {
                    console.log("ok clicked");

                    accept()

                }
            }

        }

    }

}

其中中间部分的自定义使用 property Component contentItem:null
property alias contentComponent:contentComponent
这两个将其引用出去的。

        调用main.qml 文件如下 ：

        import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.VirtualKeyboard 2.2

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    MouseArea{
        id: closeButton
        anchors.fill:parent

        onClicked: {

            console.log("close button clicked.");
            addAddress.visible = true;

        }

    }

    DefaultItemDialog{
        id : addAddress
        visible: false
        titleText: qsTr('输入信息')
        showFooter: true
        contentItem: Rectangle {
            id : content
            width: parent.width
            implicitHeight: moneyInput.implicitHeight + 20
            color: '#393f47'
            property alias txt: moneyInput.text
            TextInput {
                id: moneyInput
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width
                maximumLength: 20
                color: 'white'
            }

        }
        onAccept:
        {
            var contentItem = contentComponent.item
            console.log(contentItem)
            console.log(contentItem.txt)
            contentItem.txt = ""
            addAddress.visible = false
        }
    }

    InputPanel {
        id: inputPanel
        z: 99
        x: 0
        y: window.height
        width: window.width

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: window.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {

                    properties: "y"

                    duration: 250

                    easing.type: Easing.InOutQuad

                }
            }
        }
    }

}