Qt QMLコンポーネントのサイズを変更してページ全体を変更する方法

Question

私はアンドロイドアプリケーションで作業しており、問題に直面しています。アプリケーションのページには、入力フィールドがいくつかありますが、そのうちの1つは日付用です。日付を選択するためにオンデマンドで開くカレンダーを追加するか、手動で日付を入力する必要があります。 TextInputとボタンをクリックすると、ローダーでカレンダーアイテムが作成され、ローダーのサイズが80に設定されます（最初は0でした）。これらのコンポーネントはすべて列レイアウトに含まれています。ボタンがクリックされると、他の入力フィールドの下にカレンダーが描画されます。

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 
       } 
      } 
     } 
    } 
}