【Qt】QML自定义控件

MyInputText.qml

控件的宽度和高度可以自己设置，右侧的输入框的宽度会根据左侧文本的宽度自动设置

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

Rectangle{
    id: root

    width: 230
    height: 30

    //固定的文本
    property var labelText: "labelText"

    //用户输入的文本信息
    property var editableText: ""

    property var maxLength: 15

    RowLayout{
        anchors.fill: parent
        anchors.margins: 5
        spacing: 5

        Text {
            id: label
            text: labelText
            font.pointSize: 12
            verticalAlignment: Text.AlignVCenter
        }

        Rectangle {
            Layout.fillWidth: true
            height: parent.height

            color: "lightgray"
            border.color: "gray"
            border.width: 1
            radius: 2

            TextInput {
                text: editableText
                anchors.fill: parent
                anchors.margins: 2
                font.pointSize: 12
                focus: true
                maximumLength: maxLength
                verticalAlignment: Text.AlignVCenter
                onTextChanged: {
                    editableText = text
                    console.log(editableText)
                }
            }
        }
    }
}

增加动态边框颜色

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

Rectangle{
    id: root

    width: 260
    height: 30

    //固定的文本
    property var labelText: "labelText"

    //用户输入的文本信息
    property var editableText: ""

    property var maxLength: 15

    RowLayout{
        anchors.fill: parent
        anchors.margins: 5
        spacing: 5

        Text {
            id: label
            text: labelText
            font.pointSize: 12
            verticalAlignment: Text.AlignVCenter
        }

        Rectangle {
            id: rect

            Layout.fillWidth: true
            height: parent.height

            color: "#ffffff"
            border.color: "#bbbbbb"  //#1e98ea
            border.width: 1
            radius: 3

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true //默认是false
                onEntered: rect.border.color = "#1e98ea"
                onExited: rect.border.color = "#bbbbbb"

                TextInput {
                    text: editableText
                    anchors.fill: parent
                    anchors.margins: 2
                    font.pointSize: 12
                    focus: true
                    maximumLength: maxLength
                    verticalAlignment: Text.AlignVCenter
                    onTextChanged: {
                        editableText = text
                        console.log(editableText)
                    }
                }
            }
        }
    }
}

MyComboBox.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls.Styles 1.4

//下拉列表的显示和后台的数据可以不同，但是要通过model关联
Rectangle {
    id: root

    width: 280
    height: 40

    //固定的文本
    property var labelText: "labelText"

    //下拉框数据源
    property ListModel listModel: ListModel{}//"ListModel{}"
    //选择的项对应的数字，与数据库对应
    property int selectedNum: -1

    property var maxLength: 15

    RowLayout {
        anchors.fill: parent
        anchors.margins: 5
        spacing: 5

        Text {
            id: label
            text: labelText
            font.pointSize: 12
            verticalAlignment: Text.AlignVCenter
        }

        Rectangle {
            id: rect

            Layout.fillWidth: true
            height: parent.height

            color: "#ffffff"
            border.color: "#bbbbbb"  //#1e98ea
            border.width: 1
            radius: 3

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true //默认是false
                onEntered: rect.border.color = "#1e98ea" //浅蓝色
                onExited: rect.border.color = "#bbbbbb" //灰色

                ComboBox {
                    //选择ListModel中的一个role为显示的内容
                    textRole: "key"

                    anchors.fill: parent
                    anchors.margins: 2
                    font.pointSize: 12
                    focus: true

                    model: listModel

                    onCurrentIndexChanged: {
                        selectedNum = listModel.get(currentIndex).value
                        console.log("currentIndex: "+currentIndex)
                        console.log("selectedNum: " + selectedNum)
                    }
                }
            }
        }
    }
}

使用

设置一下listModel即可，数据可以来自于webapi

MyComboBox{
     id: left
     anchors.top: parent.top
     anchors.topMargin: 20

     anchors.left: parent.left

	//下拉框中显示的是key，对应的后台数据是value
     listModel: ListModel{
         ListElement { key: "First"; value: 123 }
         ListElement { key: "Second"; value: 456 }
         ListElement { key: "Third"; value: 789 }
     }
 }

MyTableView.qml