Question

我正在开发一个Android应用程序，我遇到了一个问题。在应用程序的页面中，我有一些输入字段，其中一个用于日期，我想添加一个按需打开的日历，用于选择日期或只是手动输入日期，为此，我创建了一个自定义组件，由TextInput和一个按钮组成，当点击它时将使用加载器创建日历项并将加载器的大小设置为80（最初为0）所有这些组件都包含在columnlayout中。单击按钮时，日历将绘制在其他输入字段下方。

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

FocusScope {
    id: root
    Layout.preferredHeight: 20
    property alias text: input.text
    property alias border: background.border
    property alias backgroundColor: background.color
    property alias textColor: input.color

    ColumnLayout{
    anchors.fill: parent
    spacing: 1
    RowLayout{
        Layout.fillHeight: true
        Layout.fillWidth: true
        Rectangle {
            id: background
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "darkgrey"
            TextInput {
                id: input
                anchors.fill: parent
                anchors.margins: 3
                verticalAlignment: TextInput.AlignVCenter
                focus: true
                text: dateInput.selectedDate
            }
        }
        CustomButton {
            id: calandar
            Layout.fillHeight: true
            Layout.preferredWidth: 40
            image: "icons/CalandarButton.svg"
            onClicked: {
                console.log("clicked calandar")
                if(calendarLoader.status === Loader.Null){
                    calendarLoader.height = 80
                    calendarLoader.sourceComponent =               Qt.createQmlObject("import QtQuick 2.5; import QtQuick.Controls 1.4; Calendar {}",
                                                                        calendarLoader,
                                                                        "calandarpp")
                }
                else{
                    calendarLoader.height = 0
                    calendarLoader.sourceComponent = undefined
                }
            }
        }
    }
    Loader {
        id: calendarLoader
        Layout.fillWidth: true
        height: 0
    }
}

}

Answer 1

如果出现问题，请尝试更改其z坐标。

永远不需要Qt.createQmlObject()。只需切换Loader.active或Item.visible。

即可

示例不可重复，请确保它与qmlscene一起运行。

这对我有用：

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

FocusScope {
    id: root
    Layout.preferredHeight: 20
    property alias text: input.text
    property alias border: background.border
    property alias backgroundColor: background.color
    property alias textColor: input.color

    z: 1

    Loader {
        id: calendarLoader
        active: false
        sourceComponent: Calendar {}
        z: 1
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 1
        RowLayout{
            Layout.fillHeight: true
            Layout.fillWidth: true

            Rectangle {
                id: background
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "darkgrey"
                TextInput {
                    id: input
                    anchors.fill: parent
                    anchors.margins: 3
                    verticalAlignment: TextInput.AlignVCenter
                    focus: true
                }
            }

            Button {
                id: calandar
                Layout.fillHeight: true
                Layout.preferredWidth: 40
                onClicked: {
                    console.log("clicked calandar")
                    calendarLoader.active = !calendarLoader.active
                }
            }
        }
    }
}

Qt QML如何更改组件的大小并获得整个页面的更改

1 个答案: