QtQuick排坑(不定时更新)

Qt5.7正式版中,TextArea的高度值在contentHeight中,而不再Height(之前版本)

***************************Model*******************************
Model定义在其他文件,此文件必须大写开头,否则无法被其他源文件调用
*******************正确******************
***main.qml:
ListView{
model: MyModel{}
}
***MyModel.qml
ListModel{

ListElement{

}
ListElement{

} ListElement{

}
}

*************错误**文件名小写无法识别********
***main.qml:
ListView{
model: mymodel{} //不可加‘;’  否则也错误
}
***mymodel.qml
ListModel{

ListElement{

}
ListElement{

} ListElement{

}
}
**************model中嵌套子model数据**************
ListModel{
id:testmodel

Component.onCompleted: {
testmodel.append({ "name":"hehe",submodel:[{txt:"测试"},{txt:"测试2"}] })

}
}

ListView{

id:mainview
anchors.fill: parent
model:testmodel
delegate:
ListView{
id:subview
width: parent.width
height: 80
model: submodel
delegate: Text{
text:model.txt
width: parent.width
height: 40
}

}

}

*******QRC资源访问:
访问QRC中的源文件:
src:"qrc:/code/Page1.qml"
*******QRC图片资源访问
由于此时Page1也在资源目录中,图片资源在上级QRC目录的iconsjquer子目录中,可以直接使用路径

Image{
height: parent.height
fillMode: Image.Pad
source: "../iconsjquer/carat-l-black.png"
anchors.left: parent.left;
anchors.leftMargin: 4
MouseArea{
anchors.fill: parent;
onClicked: {
roothd.state = "";
statck.pop();
}
}
}

BoderImage透明色显示成胶布色:
父元素高度未指定

TextArea不显示滚动条:
QtQuick.Controls 2.0不支持滚动条
使用QtQuick.Controls 1.4的TextArea

加载外部组件时,小心组件中使用了parent.x(y) 属性,此时的x,y是相对于父元素的坐标而非子元素的相对坐标
Rectangle{
id:sendroot
Material.accent:"#f2050e99";
Material.background:"#b05e1e8f"
Material.foreground:"#b05e1e8f"
Material.primary:"#b05e1e8f"
Material.theme: Material.Dark

property var offsetBeginX: 20
Ola.TextArea{
id:edit
x:offsetBeginX
width: parent.width - btn.width
anchors.bottom: parent.bottom
height: btn.height
verticalAlignment: TextEdit.AlignVCenter
onContentHeightChanged: {
if(contentHeight<btn.height)
{
height = btn.height
}else{
height = contentHeight
}

}

}

Button{

x:edit.x+edit.width
y:parent.y//错误  可以改为 0
id:btn
text:"发送";
font.bold: true
font.pixelSize: dpW(18)
height: parent.height
width: height*1.5
onClicked: {
console.log(edit.text)
}
}

}

************Popup技巧**********
默认有padding  设为0 取消边框
Popup {
padding: 0
}
*******背景透明,默认有background 设置为Item即实现透明
background: Item{}
*******点击边缘不自动关闭
closePolicy: Popup.NoAutoClose
dim:是否显示阴影背景,当false时候使用Item作为背景就是透明,否则就是透明但是有灰度背景

********滚动
Flickble有弹动效果不适合做滚动。使用import QtQuick.Controls 1.4中的ScrollView代替更加好用

Code:
import QtQuick.Controls 1.4 as Old
Old.ScrollView {
id:flck
width: parent.width
height: parent.height
Column{
id:col
....
}
.........
}
*****************************************************
ScrollView :
horizontalScrollBarPolicy:横向滚动条是否显示
verticalScrollBarPolicy:纵向滚动条是否显示
frameVisible:是否显示ScrollView的边框,默认为否,类似MFC中的控件凹凸效果