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

ListView控件

MyListView.qml（基础用法）

import QtQuick 2.0
import QtQuick.Controls 2.12

ListView{

    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.15

Window{
    width:800
    height:600
    title: "Mouse Area"
    visible :true

    MyListView{

    }


}

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

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

import QtQuick 2.0
import QtQuick.Controls 2.12

ListView{
    id:list
    width: 180;height: 200
    model: 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:  contatInfo
            objectName: "rect " + index
            text:name +": " + number   //方式三
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                console.log(contatInfo.objectName)
                console.log(currentIndex) //高亮选项就是currentIndex默认0
                currentIndex = index  //index是你点击的index赋值后可以切换
            }
        }

    }

}

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

import QtQuick 2.0
import QtQuick.Controls 2.12

Rectangle{

    width: 330
    height: 200
    border.color: "black"

ListView{
    y:20

    id:list
    header:Rectangle{  //头部
        width: 330 ;height: 20;color: "blue"
    }
    footer: Rectangle{  //底部
        width: 330 ;height: 20;color: "green"

    }

    width: 180;height: 200
    model: 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:  contatInfo
            objectName: "rect " + index
            text:name +": " + number   //方式三
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                console.log(contatInfo.objectName)
                console.log(currentIndex) //高亮选项就是currentIndex默认0
                currentIndex = 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 Platform


Rectangle{

    width: 330
    height: 200
    border.color: "black"

    // The delegate for each section header
    Component {
        id: sectionHeading
        Rectangle {
            width: container.width
            height: childrenRect.height
            color: "lightsteelblue"
            required property string section //由于没用required所以该示例无用
            Text {
                text: parent.section
                font.bold: true
                font.pixelSize: 20
            }
        }
    }

ListView{
    y:20

    id:list
    header:Rectangle{  //头部
        width: 330 ;height: 20;color: "blue"
    }
    footer: Rectangle{  //底部
        width: 330 ;height: 20;color: "green"

    }
    section.property: "size"
    section.criteria: ViewSection.FullString
    section.delegate: sectionHeading

    width: 180;height: 200
    model: 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:  contatInfo
            objectName: "rect " + index
            text:name +": " + number   //方式三
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {
                console.log(contatInfo.objectName)
                console.log(currentIndex) //高亮选项就是currentIndex默认0
                currentIndex = index  //index是你点击的index赋值后可以切换
            }
        }

    }

}

}

ComboBox控件

MyComboBox.qml

import QtQuick 2.0
import QtQuick 2.12
import QtQuick.Controls 2.12

ComboBox {
//    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.12

ComboBox {
    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.12

ComboBox {
    editable:true
    model:20
    validator: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.12


ComboBox {
    id: control
    model: ["First", "Second", "Third"]
    property bool bIsPopupShowDown: true
    x:100;y:100
    delegate: ItemDelegate {  //针对model每一个项的具体绘制
        width: control.width
        contentItem: Text {
            text: modelData
            color: index%2?"red":"blue"  //下拉框每一个项为红色
            font: control.font
            elide: Text.ElideRight
            verticalAlignment: 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: 0
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font: control.font
        color: control.pressed ? "red" : "blue" //不安下是蓝色，按下红色
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {  //设置背景，不会影响到文字颜色
        implicitWidth: 120
        implicitHeight: 40
        border.color: control.pressed ? "#17a81a" : "#21be2b"
        border.width: control.visualFocus ? 2 : 1
        radius: 2
    }

    popup: Popup {  //重中之重 popup之后必须是Popup控件 和delegate区别delegate绘制单个项目，popup是整个下拉控件
        y:bIsPopupShowDown?control.height + 10 :-control.height-10 //距离Combobox的间隙，+代表向下 -代表向上，可以用一个属性来控制
        width: control.width
        implicitHeight: contentItem.implicitHeight
        padding: 1

        contentItem: ListView {
            clip: true
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: 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: control
    model: ["First", "Second", "Third"]
    property bool bIsPopupShowDown: true
    x:100;y:100
    delegate: ItemDelegate {  //针对model每一个项的具体绘制
        width: control.width
        contentItem: Text {
            text: modelData
            color: index%2?"red":"blue"  //下拉框每一个项为红色
            font: control.font
            elide: Text.ElideRight
            verticalAlignment: 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: 0
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font: control.font
        color: control.pressed ? "red" : "blue" //不安下是蓝色，按下红色
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {  //设置背景，不会影响到文字颜色
        implicitWidth: 120
        implicitHeight: 40
        border.color: control.pressed ? "#17a81a" : "#21be2b"
        border.width: control.visualFocus ? 2 : 1
        radius: 2
    }

    popup: Popup {  //重中之重 popup之后必须是Popup控件 和delegate区别delegate绘制单个项目，popup是整个下拉控件
        y:bIsPopupShowDown?control.height + 10 :-control.height-10 //距离Combobox的间隙，+代表向下 -代表向上，可以用一个属性来控制
        width: control.width
        implicitHeight: contentItem.implicitHeight
        padding: 1

        contentItem: ListView {
            clip: true
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: control.highlightedIndex

//            ScrollIndicator.vertical: ScrollIndicator { } //添加了滚动条,一般用下面这个
            ScrollBar.vertical: ScrollBar{
                policy: ScrollBar.AlwaysOn //设置政策：总是显示
            }
//            interactive: false //设置是否需要鼠标进行拖动，默认true
//            boundsBehavior: Flickable.StopAtBounds //设置不需要回弹效果
        }

        background: Rectangle {
            border.color: "red"
            radius: 2
            layer.enabled: true
            layer.effect: DropShadow{ //影响  widget的QComboBox下拉框有阴影效果，qml需要在这里设置
                verticalOffset: 3 //纵向偏移
                radius: 8.0
                samples: 17
                color: "#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.15

Window{
    width:800
    height:600
    title: "Mouse Area"
    visible :true
    //focus使用
    Button{
        id:btn
        focus: false
//        focusPolicy: Qt.NoFocus //设置之后点击就获取不到焦点了
        width: 100;height: 40
        background: Rectangle{
            anchors.fill: parent
            border.color: btn.focus?"blue":"red"
        }
        onClicked: {
//            focus = !btn.focus
            console.log("focus:",focus)
        }
        onFocusReasonChanged: { //焦点改变原因
            console.log("focusReason:",focusReason)  //点击是0 tab键是1
            console.log("MouseFocusReason:", Qt.MouseFocusReason)  //点击是0
            console.log("TabFocusReason:",Qt.TabFocusReason)  // tab键是1

        }
        Component.onCompleted: {
            console.log("focusPolicy",focusPolicy) // 11
            console.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.15

Window{
    width:800
    height:600
    title: "Mouse Area"
    visible :true
    //focusScope使用
    FocusScope{ //如果控件是focusScope的话两个控件都有焦点，具体焦点在哪里要看activateFocus,之前控件的Rectangle
        width: 300;height: 200
        id:rect
        Text {
            id: text
            focus: true //focus为true activateFocus也为true
            text: qsTr("rect  text：") +text.focus +"|" +text.activeFocus
            Component.onCompleted: {
//                console.log("text complete ") // 15版本有，12没用
            }
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                text.activeFocus = true;
            }
        }
    }

    FocusScope{ //focusScope要使用activate focus
        y:250
        width: 300;height: 200
        id:rect1
        Text {
            id: text1
            focus: true
            text: qsTr("rect1 text：") +text1.focus +"|" +text1.activeFocus
            Component.onCompleted: {//此时text1先完成，text最后完成，所以焦点在text上
                console.log("text1 complete ")
            }
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
//                text1.activeFocus = true; // 15版本有，12没用
            }
        }
    }

}