1

この画像のようなコントロールを追加する必要がある bb 10 カスケード アプリを開発する必要があります

http://subefotos.com/ver/?37868d57047746ce1ea9ca55b7637e9eo.jpg#codigos

(赤い色で丸みを帯びています)

2 番目のバブルにタッチすると、2 番目の画面を表示する必要があり、3 番目のバブルでは 3 番目の画面などを表示する必要があります。デフォルトの画面は最初の画面に表示されます (最初のバブル ハイライト)

しかし、BB 10 カスケードでそれを行う方法と、そのコントロールは bb 10 で何と呼ばれていますか?

助けてください、

ありがとう ！！！

4

1 に答える 1

3

-------ここにページ ナビゲーションを追加しました。プロジェクトでこのコードを再利用してください--------------

クエリの github サンプルからサンプル アプリを入手してください。

https://github.com/svmrajesh/BB-10-Cascades/tree/master/MY%20APPS/stackNavigation

1.main.qml: (最初のページ)

import bb.cascades 1.0

NavigationPane { id: navigationPane backButtonsVisible: false peekEnabled: false

Page {
    id: rootPage
    Container {
        background: Color.LightGray

        layout: DockLayout {

        }
        Label {
            text: "First page"
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
        }
    }

    actions: [
        ActionItem {
            title: "Next page"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
                var page = pageDefinition.createObject();
                navigationPane.push(page);

            }

            attachedObjects: ComponentDefinition {
                id: pageDefinition
                source: "PageTwo.qml"
            }
        }
    ]
}
onPopTransitionEnded: {
    page.destroy();
}

}

2.2ページ目

import bb.cascades 1.0

Page { id: pageTwo Container { background: Color.Gray layout: DockLayout {

    }
    Label {
        text: "Second page"
        horizontalAlignment: HorizontalAlignment.Center
    }


    Container {
        layout: StackLayout {

        }
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center

        Button {

        text: qsTr("Next Page")
        imageSource: "asset:///images/picture1thumb.png"
        onClicked: {
            // show detail page when the button is clicked
            var page = getSecondPage();
            console.debug("pushing detail " + page)
            navigationPane.push(page);
        }
        property Page secondPage
        function getSecondPage() {
            if (! secondPage) {
                secondPage = secondPageDefinition.createObject();
            }
            return secondPage;
        }
        attachedObjects: [
            ComponentDefinition {
                id: secondPageDefinition
                source: "PageTwoOne.qml"
            }
        ]
    }

    Button {
       text: "Previous Page"
       onClicked: {
           navigationPane.pop();
       }

    }

}
}

/* ------------- Use this Code If back button visibility is "True"-----------------

paneProperties: NavigationPaneProperties {

    backButton: ActionItem {
        title: "Back"
     // imageSource: "asset:///back.png"
        onTriggered: {
            navigationPane.pop();
        }
        }
} */

}

3.最後のページ

import bb.cascades 1.0

Page { id: pageTwoone

    Container {
 background: Color.DarkGray
 layout: DockLayout {}

 Label {
        horizontalAlignment: HorizontalAlignment.Center
        text: "Last Page"
 }


 Container {
      layout: StackLayout {}
      horizontalAlignment: HorizontalAlignment.Center
      verticalAlignment: VerticalAlignment.Center


    Button {
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center
        text: qsTr("Goto Home Page")

        onClicked: {
            // show detail page when the button is clicked
            navigationPane.navigateTo(rootPage);
             }
            }
        Button {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: qsTr("Goto Back")

            onClicked: {
                // show detail page when the button is clicked
                navigationPane.pop();
            }

        }
    }
}
}

------------ このコードを使用してナビゲートするページを追加する--------------------------------

------------- このコードをコピーして実行.. 必要に応じて上記のリンクからサンプル アプリを取得 ------

于 2013-09-03T09:09:36.837 に答える