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)
            }
        }
    }

}

转载于:https://www.cnblogs.com/xianqingzh/p/4349608.html