qml 一些知识点

1、pagestack进行页面调整的时候，需要对页面状态做一些跟踪：

Stack.onStatusChanged: {

if (Stack.status == Stack.Active) { //可以判断是否跳转完成

isPageReady = true

} else if (Stack.status == Stack.Inactive) {

isPageReady = false

}

}

2、qml中信号的使用

A.qml 中有一个函数实现

//选择案件后的回调事件

function setCaseInfo(name,legalid){

var info = {};

info.name = name;

info.legalid = legalid;

    caseText.text = name;
    downloadRec.caseId = legalid;
    var result = Storage.insert("caseinfo",JSON.stringify(info));
}

动态创建一个页面B并获取返回值：

MouseArea{

id : caseArea

anchors.fill: parent

onClicked: {

var content = Case.createElement("../caseStudy/AddCaseWin.qml",null);

content.caseselected.connect(setCaseInfo);

}

}

B页面有一个信号

signal caseselected(string name,int caseid)

B页面调用C组件:

ListView{

anchors.fill: parent

spacing: 25*screen.scale

clip: true

delegate: AddCaseItem{}

model:caseListModel

orientation:ListView.Horizontal

}

C组件则实现具体的参数透传：

MouseArea{

anchors.fill: parent

onClicked: {

caseselected(desction,legalid);

closeWin();

}

}

。

3.设置内部元素

default property alias contents: contents.data

    Item {
        id: contents

        width: flickable.width
        height: autoFlick ? childrenRect.height : flickable.height
    }

根据官方的意思：

data是默认属性，相当于子控件。childrenRect是用来访问子元素的宽高等信息

4.遍历指定类型的元素：

function getFlickableChild(item) {

if (item && item.hasOwnProperty("children")) {

for (var i=0; i < item.children.length; i++) {

var child = item.children[i];

if (internal.isVerticalFlickable(child)) {

if (child.anchors.top === page.top || child.anchors.fill === page) {

return item.children[i];

}

}

}

}

return null;

}

如何构建qml的模版：

They use default property alias ... to alias the child items to any property of any item. If you don't want to alias the children but give the alias property a name, just remove default. (Literal children are per QML definition the value of the default property.)

Item {

id: button

default property alias contents: placeholder.children

anchors.fill: parent

Rectangle {
    anchors.fill: parent
    radius: 10
    color: "gray"

    Item {
        id: placeholder     <-- where the placeholder should be inserted
    }
}

}

一个更具体的例子：

Dialog {

id: actionableDialog

title: "Change Text"

hasActions: true

    TextField {
        id: optionText
        text: currentText
        width: parent.width
        placeholderText: "New Option to Confirm"
    }

    onAccepted: {
        currentText = optionText.text
    }
}

Dialog.qml

PopupBase {

id: dialog

overlayLayer: "dialogOverlayLayer"
overlayColor: Qt.rgba(0, 0, 0, 0.3)

opacity: showing ? 1 : 0
visible: opacity > 0

width: Math.max(minimumWidth,
                content.contentWidth + 2 * contentMargins)

height: Math.min(units.dp(350),
                 headerView.height + units.dp(32) +
                 content.contentHeight +
                 content.topMargin +
                 content.bottomMargin +
                 buttonContainer.height)

property int contentMargins: units.dp(16)

property int minimumWidth: units.dp(270)

property alias title: titleLabel.text
property alias text: textLabel.text

/*!
   \qmlproperty Button negativeButton

   The negative button, displayed as the leftmost button on the right of the dialog buttons.
   This is usually used to dismiss the dialog.
 */
property alias negativeButton: negativeButton

/*!
   \qmlproperty Button primaryButton

   The primary button, displayed as the rightmost button in the dialog buttons row. This is
   usually used to accept the dialog's action.
 */
property alias positiveButton: positiveButton

property string negativeButtonText: "Cancel"
property string positiveButtonText: "Ok"
property alias positiveButtonEnabled: positiveButton.enabled

property bool hasActions: true

default property alias dialogContent: column.data

Flickable {

id: content

        contentWidth: column.implicitWidth
        contentHeight: column.height
        clip: true

        anchors {
            left: parent.left
            right: parent.right
            top: headerView.bottom
            topMargin: units.dp(8)
            bottomMargin: units.dp(-8)
            bottom: buttonContainer.top
        }

        interactive: contentHeight + units.dp(8) > height
        bottomMargin: hasActions ? 0 : units.dp(8)

        Rectangle {
            Column {
                id: column
                anchors {
                    left: parent.left
                    margins: contentMargins
                }

                width: content.width - 2 * contentMargins
                spacing: units.dp(16)
            }
        }
    }

}