1

我需要开发一个 bb 10 级联应用程序，我需要在其中添加一个控件，如下图所示

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

（红色四舍五入）

当我触摸第二个气泡时，我需要显示第二个屏幕，第三个气泡第三个屏幕等等。默认屏幕应显示为第一个屏幕（第一个气泡高亮）

但是如何在 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.第二页

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 回答