QT之QML从入门到精通（第五章）

ListView控件

MyListView.qml（基础用法）

import QtQuick 2.0
import QtQuick.Controls 2.12ListView{width: 180;height: 200
//    model: 3 //数字  或者list 方式一
//    model: ["Button","test","test333"]  方式二model: ListModel{//ListModel自定义模型 方式三ListElement{name:"Button" ;number:"222"}  // 可以自己随意加元素ListElement{name:"test" ;number:"test2222"}}spacing: 10 //设置每一项之间的间距delegate: Button {  //控制了每一项数据是怎么绘制的
//        text: index+1   方式一
//        text:modelData 方式二text:name +": " + number   //方式三//        width: 100;height: 80
//        background: Rectangle{
//            anchors.fill: parent
//            color: "black"
//        }}}

main.qml

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
//import QtQuick.Layouts 1.15Window{width:800height:600title: "Mouse Area"visible :trueMyListView{}}

这里要注意，要是代码修改后运行发现没有变化，需要清除编译，在重新构建一边。

MyListView.qml（高亮属性，点击切换）

import QtQuick 2.0
import QtQuick.Controls 2.12ListView{id:listwidth: 180;height: 200model: ListModel{//ListModel自定义模型 方式三ListElement{name:"Button" ;number:"222"}  // 可以自己随意加元素ListElement{name:"test" ;number:"test2222"}}spacing: 20 //设置每一项之间的间距highlight:Rectangle{color:"lightsteelblue" ;radius: 5 } //设置高亮delegate: Rectangle {  //控制了每一项数据是怎么绘制的color: "transparent"width: list.width; height: 50 //需要一起设置Text {id:  contatInfoobjectName: "rect " + indextext:name +": " + number   //方式三}MouseArea{anchors.fill: parentonClicked: {console.log(contatInfo.objectName)console.log(currentIndex) //高亮选项就是currentIndex默认0currentIndex = index  //index是你点击的index赋值后可以切换}}}}

MyListView.qml(在头部添加控件)

import QtQuick 2.0
import QtQuick.Controls 2.12Rectangle{width: 330height: 200border.color: "black"ListView{y:20id:listheader:Rectangle{  //头部width: 330 ;height: 20;color: "blue"}footer: Rectangle{  //底部width: 330 ;height: 20;color: "green"}width: 180;height: 200model: ListModel{//ListModel自定义模型 方式三ListElement{name:"Button" ;number:"222"}  // 可以自己随意加元素ListElement{name:"test" ;number:"test2222"}}spacing: 20 //设置每一项之间的间距highlight:Rectangle{color:"lightsteelblue" ;radius: 5 } //设置高亮delegate: Rectangle {  //控制了每一项数据是怎么绘制的color: "transparent"width: list.width; height: 50 //需要一起设置Text {id:  contatInfoobjectName: "rect " + indextext:name +": " + number   //方式三}MouseArea{anchors.fill: parentonClicked: {console.log(contatInfo.objectName)console.log(currentIndex) //高亮选项就是currentIndex默认0currentIndex = index  //index是你点击的index赋值后可以切换}}}}}

MyListView.qml(section属性讲解)

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as PlatformRectangle{width: 330height: 200border.color: "black"// The delegate for each section headerComponent {id: sectionHeadingRectangle {width: container.widthheight: childrenRect.heightcolor: "lightsteelblue"required property string section //由于没用required所以该示例无用Text {text: parent.sectionfont.bold: truefont.pixelSize: 20}}}ListView{y:20id:listheader:Rectangle{  //头部width: 330 ;height: 20;color: "blue"}footer: Rectangle{  //底部width: 330 ;height: 20;color: "green"}section.property: "size"section.criteria: ViewSection.FullStringsection.delegate: sectionHeadingwidth: 180;height: 200model: ListModel{//ListModel自定义模型 方式三ListElement{name:"Button" ;number:"222" ;size:"small"}  // 可以自己随意加元素ListElement{name:"test" ;number:"test2222";size:"large"}}spacing: 20 //设置每一项之间的间距highlight:Rectangle{color:"lightsteelblue" ;radius: 5 } //设置高亮delegate: Rectangle {  //控制了每一项数据是怎么绘制的color: "transparent"width: list.width; height: 50 //需要一起设置Text {id:  contatInfoobjectName: "rect " + indextext:name +": " + number   //方式三}MouseArea{anchors.fill: parentonClicked: {console.log(contatInfo.objectName)console.log(currentIndex) //高亮选项就是currentIndex默认0currentIndex = index  //index是你点击的index赋值后可以切换}}}}}

ComboBox控件

MyComboBox.qml

import QtQuick 2.0
import QtQuick 2.12
import QtQuick.Controls 2.12ComboBox {
//    model: 3 //
//    model: ["button","checkbox","popup"]model:ListModel{ListElement{text:"Button";}ListElement{text:"checkbox"}ListElement{text:"popup"}}editable: true //可以编辑下拉选项onAccepted: { //按下回车键触发if(find(editText) === -1){  // ===三个等号代表比较  ==等号是强制匹配model.append({text:editText}) // ListModel对象才有append属性，其他没有}}Component.onCompleted: {console.log(count ) // 获取总数}}

import QtQuick 2.0
import QtQuick 2.12
import QtQuick.Controls 2.12ComboBox {textRole:"text"
//    valueRole:"value" //2.12没有这个属性2.15可以试试displayText: currentText +" "+ currentIndex //可以制定显示的文本样式//    model:ListModel{
//        ListElement{text:"Button";value:100}
//        ListElement{text:"checkbox";value:200 }
//        ListElement{text:"popup";value:300 }
//    }model: [{value:100,text:"111"},{value:200,text:"222"},{value:300,text:"333"}]onCurrentTextChanged: {console.log("text: ",currentText)}onCurrentIndexChanged: {console.log("index: ",currentIndex)}
//    onCurrentValueChanged:{ //2.12没有这个属性2.15可以试试
//        console.log("value:",value)
//    }Component.onCompleted: {console.log(count ) // 获取总数}}

import QtQuick 2.0
import QtQuick 2.12
import QtQuick.Controls 2.12ComboBox {editable:truemodel:20validator:IntValidator{ //输入验证器
//        top:20
//        bottom: 0
//        regExp: /[0-9]{2}/  //我的当前版本没用正则匹配}onAcceptableInputChanged: {  //接收输入值改变信号console.log(acceptableInput) // 判断当前是否匹配  验证器正确性}}

ComboBox自定义绘制

import QtQuick 2.0
import QtQuick 2.12
import QtQuick.Controls 2.12ComboBox {id: controlmodel: ["First", "Second", "Third"]property bool bIsPopupShowDown: truex:100;y:100delegate: ItemDelegate {  //针对model每一个项的具体绘制width: control.widthcontentItem: Text {text: modelDatacolor: index%2?"red":"blue"  //下拉框每一个项为红色font: control.fontelide: Text.ElideRightverticalAlignment: Text.AlignVCenter}highlighted: control.highlightedIndex === index}//    indicator: Canvas { //右侧的下拉箭头绘制，使用画布，也可以之间使用image控件
//        id: canvas
//        x: control.width - width - control.rightPadding
//        y: control.topPadding + (control.availableHeight - height) / 2
//        width: 12
//        height: 8
//        contextType: "2d"//        Connections {
//            target: control
//            function onPressedChanged() { canvas.requestPaint(); }
//        }//        onPaint: {
//            context.reset();
//            context.moveTo(0, 0);
//            context.lineTo(width, 0);
//            context.lineTo(width / 2, height);
//            context.closePath();
//            context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
//            context.fill();
//        }
//    }contentItem: Text { //控制当前控件的显示内容leftPadding: 0rightPadding: control.indicator.width + control.spacingtext: control.displayTextfont: control.fontcolor: control.pressed ? "red" : "blue" //不安下是蓝色，按下红色verticalAlignment: Text.AlignVCenterelide: Text.ElideRight}background: Rectangle {  //设置背景，不会影响到文字颜色implicitWidth: 120implicitHeight: 40border.color: control.pressed ? "#17a81a" : "#21be2b"border.width: control.visualFocus ? 2 : 1radius: 2}popup: Popup {  //重中之重 popup之后必须是Popup控件 和delegate区别delegate绘制单个项目，popup是整个下拉控件y:bIsPopupShowDown?control.height + 10 :-control.height-10 //距离Combobox的间隙，+代表向下 -代表向上，可以用一个属性来控制width: control.widthimplicitHeight: contentItem.implicitHeightpadding: 1contentItem: ListView {clip: trueimplicitHeight: contentHeightmodel: control.popup.visible ? control.delegateModel : nullcurrentIndex: control.highlightedIndex//            ScrollIndicator.vertical: ScrollIndicator { } //添加了滚动条,一般用下面这个ScrollBar.vertical: ScrollBar{policy: ScrollBar.AlwaysOn //设置政策：总是显示}
//            interactive: false //设置是否需要鼠标进行拖动，默认true
//            boundsBehavior: Flickable.StopAtBounds //设置不需要回弹效果}background: Rectangle {border.color: "red"radius: 2}}
}

import QtQuick 2.0
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0 //可以设置阴影，效果ComboBox {id: controlmodel: ["First", "Second", "Third"]property bool bIsPopupShowDown: truex:100;y:100delegate: ItemDelegate {  //针对model每一个项的具体绘制width: control.widthcontentItem: Text {text: modelDatacolor: index%2?"red":"blue"  //下拉框每一个项为红色font: control.fontelide: Text.ElideRightverticalAlignment: Text.AlignVCenter}highlighted: control.highlightedIndex === index}//    indicator: Canvas { //右侧的下拉箭头绘制，使用画布，也可以之间使用image控件
//        id: canvas
//        x: control.width - width - control.rightPadding
//        y: control.topPadding + (control.availableHeight - height) / 2
//        width: 12
//        height: 8
//        contextType: "2d"//        Connections {
//            target: control
//            function onPressedChanged() { canvas.requestPaint(); }
//        }//        onPaint: {
//            context.reset();
//            context.moveTo(0, 0);
//            context.lineTo(width, 0);
//            context.lineTo(width / 2, height);
//            context.closePath();
//            context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
//            context.fill();
//        }
//    }contentItem: Text { //控制当前控件的显示内容leftPadding: 0rightPadding: control.indicator.width + control.spacingtext: control.displayTextfont: control.fontcolor: control.pressed ? "red" : "blue" //不安下是蓝色，按下红色verticalAlignment: Text.AlignVCenterelide: Text.ElideRight}background: Rectangle {  //设置背景，不会影响到文字颜色implicitWidth: 120implicitHeight: 40border.color: control.pressed ? "#17a81a" : "#21be2b"border.width: control.visualFocus ? 2 : 1radius: 2}popup: Popup {  //重中之重 popup之后必须是Popup控件 和delegate区别delegate绘制单个项目，popup是整个下拉控件y:bIsPopupShowDown?control.height + 10 :-control.height-10 //距离Combobox的间隙，+代表向下 -代表向上，可以用一个属性来控制width: control.widthimplicitHeight: contentItem.implicitHeightpadding: 1contentItem: ListView {clip: trueimplicitHeight: contentHeightmodel: control.popup.visible ? control.delegateModel : nullcurrentIndex: control.highlightedIndex//            ScrollIndicator.vertical: ScrollIndicator { } //添加了滚动条,一般用下面这个ScrollBar.vertical: ScrollBar{policy: ScrollBar.AlwaysOn //设置政策：总是显示}
//            interactive: false //设置是否需要鼠标进行拖动，默认true
//            boundsBehavior: Flickable.StopAtBounds //设置不需要回弹效果}background: Rectangle {border.color: "red"radius: 2layer.enabled: truelayer.effect: DropShadow{ //影响  widget的QComboBox下拉框有阴影效果，qml需要在这里设置verticalOffset: 3 //纵向偏移radius: 8.0samples: 17color: "#80000000"}}}
}

focus相关FoucusScope

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
//import QtQuick.Layouts 1.15Window{width:800height:600title: "Mouse Area"visible :true//focus使用Button{id:btnfocus: false
//        focusPolicy: Qt.NoFocus //设置之后点击就获取不到焦点了width: 100;height: 40background: Rectangle{anchors.fill: parentborder.color: btn.focus?"blue":"red"}onClicked: {
//            focus = !btn.focusconsole.log("focus:",focus)}onFocusReasonChanged: { //焦点改变原因console.log("focusReason:",focusReason)  //点击是0 tab键是1console.log("MouseFocusReason:", Qt.MouseFocusReason)  //点击是0console.log("TabFocusReason:",Qt.TabFocusReason)  // tab键是1}Component.onCompleted: {console.log("focusPolicy",focusPolicy) // 11console.log("Qt.StrongFocus",Qt.StrongFocus) // 11 点击的时候可以获取到焦点}}}

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform
//import QtQuick.Layouts 1.15Window{width:800height:600title: "Mouse Area"visible :true//focusScope使用FocusScope{ //如果控件是focusScope的话两个控件都有焦点，具体焦点在哪里要看activateFocus,之前控件的Rectanglewidth: 300;height: 200id:rectText {id: textfocus: true //focus为true activateFocus也为truetext: qsTr("rect  text：") +text.focus +"|" +text.activeFocusComponent.onCompleted: {
//                console.log("text complete ") // 15版本有，12没用}}MouseArea{anchors.fill: parentonClicked: {text.activeFocus = true;}}}FocusScope{ //focusScope要使用activate focusy:250width: 300;height: 200id:rect1Text {id: text1focus: truetext: qsTr("rect1 text：") +text1.focus +"|" +text1.activeFocusComponent.onCompleted: {//此时text1先完成，text最后完成，所以焦点在text上console.log("text1 complete ")}}MouseArea{anchors.fill: parentonClicked: {
//                text1.activeFocus = true; // 15版本有，12没用}}}}