QMLによるページナビゲーション

Question

QMLで次のGUIを実装しようとしていますが、アプリケーションのさまざまなページを正しくナビゲートする方法を理解するのに問題があります。

メインメニューの3つのボタンがあります。ユーザーが「アクタ」ボタンをクリックすると、UIは「アクタビュー」に切り替わります。ここでは、サムネイルビューとリストビューを切り替えることができます。ユーザがアクタの1つをクリックすると、UIはアクタ詳細ビューに切り替わります。アクタのすべてのムービーをリストする「ネストされた」ムービービューを持つビュー。

私はStackViewを使用してこれを実装しようとしています。

StackViewは、メインメニュー画面（main.qml）にあります。ユーザーがボタンをクリックすると、onClickedイベントが正しいビューをスタックにプッシュします。

ActorsView.qmlは、内部のStackView（おそらく悪い考えです）と、ThumbとDetailビューを切り替える2つのボタンで構成されています。これは、ThumbまたはDetailビューをローカルスタックにプッシュすることによって行われます。

異なって見えますが、DetailView.qmlとThumbView.qmlの機能はまったく同じです。 ここで私は問題に遭遇しました。詳細イベントビューまたはサムビュービューでクリックイベントが発生したときに、メインビューに通知する必要があります。そのため、（イベントに渡された情報に基づいて）どのビューがメインスタックにプッシュするかを知ることができます。例えば、ユーザがActor1をクリックすると、メインメニューは「アクタ1のアクタ詳細ビュー」をスタックにプッシュすることができる。

悲しいことに、悲しいことに、親要素のネストされたコンポーネントで発生しているイベントを「キャッチ」する方法がわかりません。

私は数週間前にQMLとQTを使い始めました。私のアプローチがすべて間違っていると聞いて嬉しく思います。残念ながらこれは私がこれまでに見つけた唯一の実行可能なオプションです。

main.qml：

ApplicationWindow { 
    title: qsTr("Hello World") 
    width: 1280 
    height: 720 
    visible: true 
    id: mainWindow 

    Component{ 
     id: homeScreen 
     Rectangle{ 
      height: 500 
      width: 500 
      color:"blue" 
      anchors.centerIn: mainWindow 

      Text { 
       anchors.centerIn: parent 
       text: qsTr("Home") 
       font.pixelSize: 40 
      } 
     } 
    } 


    Component{ 
     id: actorsView 
     ActorsView{ 
      view: stack 
     } 
    } 


    Component{ 
     id: moviesView 
     MoviesView{ 
      view: stack 
     } 
    } 

    ColumnLayout{ 
     RowLayout{ 
      Layout.fillWidth: true 


      Button{ 
       text: "Back" 
       onClicked: stack.pop() 

      } 


      Button{ 
       text: "actor view" 
       onClicked: stack.push(actorView) 
      } 

      Button{ 
       text: "movie view" 
       onClicked: stack.push(moviesView) 

      } 

     } 

     StackView { 
      id: stack 
      initialItem: homeScreen 
      Layout.fillHeight: true 
      Layout.fillWidth: true 

     } 

    } 

ActorsView.qml：

Item { 
    property StackView view 

    Component { 
     id: actorDetailView 
     DetailView { 
      name: "actorDetailView" 
      text: "Actor" 
     } 
    } 

    Component { 
     id: actorThumbView 
     ThumbView { 
      name: "actorThumbView" 
      text: "Actor" 
     } 
    } 

    ColumnLayout { 

     RowLayout { 

      Text { 
       text: "Actor view" 
       Layout.fillWidth: true 
       horizontalAlignment: Text.AlignHCenter 
      } 

      Button { 
       text: "Detail" 
       onClicked: internalStack.push(actorDetailView) 
      } 
      Button { 
       text: "Thumb" 
       onClicked: internalStack.push(actorThumbView) 
      } 

      Button { 
       text: "back" 
       onClicked: internalStack.pop() 
      } 

      Button { 
       text: "depth: " + internalStack.depth 

      } 
     } 

     StackView { 
      id: internalStack 
      initialItem: { 
       console.log(internalStack.depth) 
       internalStack.initialItem = actorThumbView 
      } 
      Layout.fillHeight: true 
      Layout.fillWidth: true 
     } 
    } 
} 

ThumbView.qml：

Item { 
    property string name: "thumbView" 
    property string text 
    property int counter: 0 
    id:thumbView 
    signal thumbPressed (string pressedName) 

    GridLayout { 
     columnSpacing: 10 
     rowSpacing: 10 
     width: parent.width 

     Repeater { 
      model: 16 
      Rectangle { 

       width: 200 
       height: 300 
       color: "grey" 
       Text { 
        id: lable 
        text: text 
        anchors.centerIn: parent 
       } 

       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         var tag = lable.text 
         console.log("You have clicked " + tag) 

         thumbView.thumbPressed(tag) 
        } 
       } 

       Component.onCompleted: { 
        counter = counter + 1 
        lable.text = text + " " + counter 
       } 
      } 
     } 
    } 

Answer 1

実際ですQMLアプリケーションを構築するための共通のアプローチです。それですべてが悪くないわけではありません。ネストされたStackViewは、ページのサブコンテンツを管理する強力な方法ですが、必ずアプリ構造にレベルを追加してください。独自のPageアイテムを作成し、ナビゲーションとインタラクションを必要に応じて再定義することで、簡単にできます。

ネストされたコンポーネントのシグナルを処理する方法はさまざまです。一番簡単なのは、識別されたアイテムを階層内で呼び出すことです。同じQMLファイルにない場合でも、QMLのローカル要素と親要素はidから直接アクセスできます。あなたのページやコンポーネントとアプリケーションの残りの部分との結合を誘発する欠点があります。

ApplicationWindow { 
    id: mainWindow 

    function pushPage(page) { 
     stack.push(page) 
    } 
    function showActor(id) { 
     ... 
    } 

    // ... 
} 

あなたのページには単純に...モジュラーもっと何かを達成するために

MouseArea { 
    onClicked: { 
     mainWindow.showActor(index) 
    } 
} 

、あなたはいくつかの名前、またはあなたのナビゲーションを管理するために、QMLのインターフェイスおよび/またはC++を実装するためにStackView currentItem、信号、ConnectionsとBinding要素を頼ることができます。

ゴールのアーキテクチャによっては、間違いなく多くの可能性があります。&学習には完璧なものがあります。