在QML应用中是用DefaultSheet及ComposerSheet

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

我们来做一个练习：

import QtQuick 2.0
import Ubuntu.Components 1.1
import 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