在QML应用中是用DefaultSheet及ComposerSheet

来源：互联网发布：记录轨迹软件编辑：程序博客网时间：2024/04/28 11:18

在应用中有时我们希望在不中断应用界面导航的前提下，我们希望插入一个展示内容的窗口。我们可以是用DefaultSheet及ComposerSheet来显示我们所需要的内容。其实在以前我们的Dialog教程中，有类似的功能尽管展示有一点不同。

我们来做一个练习：

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.Popups 0.1/*!    \brief MainView with a Label and Button elements.*/MainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "sheet.liu-xiao-guo"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    // Removes the old toolbar and enables new features of the new header.    useDeprecatedToolbar: false    width: units.gu(60)    height: units.gu(85)    Page {        title: i18n.tr("sheet")        Component {            id: defaultSheet            DefaultSheet {                id: sheet                title: i18n.tr("Default sheet Title")//                doneButton: true                Label {                    anchors.fill: parent                    wrapMode: Text.WordWrap                    text:                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +                    "Integer et ante at erat malesuada accumsan in eget mauris. " +                    "Nunc ultrices tristique laoreet. In non tristique lorem. " +                    "Donec in libero ut libero pretium lacinia. Proin dictum faucibus viverra. "                }            }        }        Component {            id: composerSheet            ComposerSheet {                id: sheet                title: i18n.tr("Composer sheet")                Label {                    anchors.fill: parent                    wrapMode: Text.WordWrap                    text:                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +                    "Integer et ante at erat malesuada accumsan in eget mauris. " +                    "Nunc ultrices tristique laoreet. In non tristique lorem. " +                    "Donec in libero ut libero pretium lacinia. Proin dictum faucibus viverra. "                }                onCancelClicked: PopupUtils.close(sheet)                onConfirmClicked: PopupUtils.close(sheet)            }        }        Row {            anchors.centerIn: parent            spacing: units.gu(2)            Button {                text: "Default sheet"                onClicked: {                    PopupUtils.open(defaultSheet, null)                }            }            Button {                text: "Composer Sheet"                onClicked: {                    PopupUtils.open(composerSheet, null)                }            }        }    }}

运行我们的应用：

对于DefaultSheet来说，我们可以看见一个“Close”按钮，当然，我们也可以设置它的属性“doneButton”为真，这样就会有“Done”的按钮。当然，这两个按钮不可以同时出现：

对于ComposerSheet来说，它有两个按钮“Cancel”及“Confirm”。这样我们就可以利用这两个按钮来确认或放弃我们在Sheet中的修改（如果有edit及选项的情况）。

结合我们先前的Dialog来说，展示的有些类似的地方。但是Dialog显示的没有这么宽，并且背景的颜色显示的黑色的。

在我们先前的教程“从零开始创建一个Ubuntu应用--一个小的RSS阅读器”。在第一部分的练习中，我们可以甚至可以利用DefaultSheet来展示我们的RSS内容而不需要创建一个新的Component。

整个项目的源码是：https://github.com/liu-xiao-guo/sheet

0 0