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中的控件凹凸效果