【QML】关于图片与comboBox和ListView的一些问题总结

关于设置图片的颜色问题。

//QML：
//这里就是修改close的颜色为白色

 Image {
        id: id_image
        source: "qrc:/image/close.svg"
        anchors.top: parent.top
        anchors.topMargin: 15
        anchors.right: parent.right
        anchors.rightMargin: 25
        width: 11.2
        height: 10.8
        ColorOverlay{  //修改图片的颜色
            anchors.fill: id_image
            source: id_image
            color: "white"
        }
    }

ListView上下拖动出现白色空白区域问题。

//QML：
//禁止listview控件回弹，解决白色空白出现
boundsBehavior: Flickable.StopAtBounds

关于图片加载进来，修改大小，不满足比例？

//非代码块！

Image.Stretch：图片拉伸自适应；（默认的）
Image.PreserveAspectFit：按比例缩放，不裁剪
Image.PreserveAspectCrop：均匀缩放，必要时裁剪
Image.Tile：像贴瓷砖一样
Image.TileVertically：水平拉伸，垂直平铺
Image.TileHorizontally：垂直拉伸，水平平铺
Image.Pad：原始图像不做处理

关于使用canvas绘画一个下拉箭头和左向箭头

indicator: Canvas {
            id: idCanvas;
			//使之居中
            x: idComboxBoxCtrl.width - width - idComboxBoxCtrl.rightPadding + 5;
            y: idComboxBoxCtrl.topPadding + (idComboxBoxCtrl.availableHeight - height +9) / 2;
            width: 15;
            height: 15;
            contextType: "2d";

			//绑定其他控件的消息
            Connections {
                target: idComboxBoxCtrl;
				//comboBox控件只有Press的处理方法
                onPressedChanged: {
                    idCanvas.requestPaint() //重绘
                }
            }

            onPaint: {
				context.reset();
                if(idComboBoxPopup.visible)
                {//方向向下
                    context.moveTo(0, 0);
                    context.lineWidth = 2;

                    context.lineTo(5, 4.8);
                    context.lineTo(10, 0);
                }
                else { //方向向左
                    context.moveTo(10, 0);
                    context.lineWidth = 2;																													

                    context.lineTo(5, 4.8);
                    context.lineTo(10, 10);
                }
                context.strokeStyle = idComboxBoxCtrl.pressed ? "#EEEFF7" : "#999999";
                context.stroke();
            }
        }

下面贴上整个comboBox的封装：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQml 2.12

ComboBox {
    id: idComboxBoxCtrl

    leftInset: 0;
    rightInset: 0
    topInset: 0;
    bottomInset: 0;
    property int radius:6;
    property ListModel dataModel: ({})
    property string bgColor: "#00FFFF"
    property string textColor: "#606266" //默认标题颜色
    property string borderColor: "#637486" //默认颜色
    property bool g_bPressed: false    //是否选中下拉框

    property int borderWidth: 2
    property int popupHeight: 300 //默认弹出层高度
    property string strSelectID: ""
    signal sigItemSelected(int id,int pid,string itemText)//项选完成信号

    model: dataModel
    //设置文本
    function setText(_text){
        idComboxBoxCtrl.displayText = _text;
    }
    //获取文本
    function getText(){
        return idComboxBoxCtrl.displayText;
    }
    //设置ID
    function setID(_id)
    {
        for(var i =0 ; i < idComboxBoxCtrl.model.count ; i++)
        {
            if(idComboxBoxCtrl.model.get(i).id === _id)
            {
                idComboxBoxCtrl.displayText = idComboxBoxCtrl.model.get(i).itemText;
                idComboxBoxCtrl.currentIndex = i;
                break;
            }
        }

        return idComboxBoxCtrl.strSelectID = _id;
    }
    //获取ID
    function getID(){
        return idComboxBoxCtrl.strSelectID;
    }
    //清除文本
    function clear(){
        idComboxBoxCtrl.displayText = ""
    }
    //获取数据项
    function getItem(_index){
        return idComboxBoxCtrl.dataModel.get(_index);
    }
    //设置数据项
    function setItem(_index){
        let tmpItem = idComboxBoxCtrl.dataModel.get(_index);
        idComboxBoxCtrl.setID(tmpItem.id);
        idComboxBoxCtrl.setText(tmpItem.itemText);
    }
    //设置边框颜色
    function setBorderColor(_color){
        idComboBoxBackground.border.color = _color;
    }
    //设置背景颜色
    function setBgColor(_color){
        idComboxBoxCtrl.bgColor = _color;
    }

    //下拉项
    delegate: ItemDelegate {
        width: idComboxBoxCtrl.width
        height: idComboxBoxCtrl.height - 10
        contentItem: Text {
            text: itemText
            color: listview1.currentIndex === index ? "#ffffff" : textColor
            font.pixelSize: idComboxBoxCtrl.font.pixelSize - 2;
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }

        MouseArea{
            anchors.fill:parent
            onClicked:
            {
                idComboxBoxCtrl.currentIndex = index
                idComboxBoxCtrl.displayText = idComboxBoxCtrl.model.get(index).itemText;
                try{
                    idComboxBoxCtrl.strSelectID = id;
                    sigItemSelected(id,index,itemText) //发射选择完成信号
                    idComboBoxPopup.close() //选择后自动关闭弹出层
                }catch(e){
                }
                idComboBoxPopup.close() //选择后自动关闭弹出层
            }
        }
    }

    indicator: Canvas {
            id: idCanvas;
			//使之居中
            x: idComboxBoxCtrl.width - width - idComboxBoxCtrl.rightPadding + 5;
            y: idComboxBoxCtrl.topPadding + (idComboxBoxCtrl.availableHeight - height +9) / 2;
            width: 15;
            height: 15;
            contextType: "2d";

            Connections {
                target: idComboxBoxCtrl;

                onPressedChanged: {
                    idCanvas.requestPaint()
                }
            }

            onPaint: {
				context.reset();
                if(idComboBoxPopup.visible)
                {//方向向下
                    context.moveTo(0, 0);
                    context.lineWidth = 2;

                    context.lineTo(5, 4.8);
                    context.lineTo(10, 0);
                }
                else { //方向向左
                    context.moveTo(10, 0);
                    context.lineWidth = 2;																													

                    context.lineTo(5, 4.8);
                    context.lineTo(10, 10);
                }
                context.strokeStyle = idComboxBoxCtrl.pressed ? "#EEEFF7" : "#999999";
                context.stroke();
            }
        }

    //显示文字
    contentItem: Text {
        leftPadding: 0
        rightPadding: 0 //+ idComboxBoxCtrl.spacing
        width: parent.width - 12
        text: idComboxBoxCtrl.displayText //默认显示文字
        font: idComboxBoxCtrl.font //字体
        color: textColor //idComboxBoxCtrl.pressed ? "#666666" : "#999999" //字体颜色
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
        anchors.left: idComboxBoxCtrl.left
        anchors.leftMargin: 16
        height: parent.height
    }
    //背景
    background: Rectangle {
        id:idComboBoxBackground
        implicitWidth: 120
        implicitHeight: 40
        border.color: idComboxBoxCtrl.focus ? "#00BFB5" : "#637486" //边框颜色
        border.width: idComboxBoxCtrl.visualFocus ? 2 : 2 //默认边框大小
        radius: 5 //圆角
        color: "#505D6E"
    }

    //弹出层
    popup: Popup {
        id:idComboBoxPopup
        y: idComboxBoxCtrl.height - 1
        width: idComboxBoxCtrl.width
        height: contentItem.implicitHeight < popupHeight ? contentItem.implicitHeight : popupHeight
        implicitHeight: contentItem.implicitHeight < 300 ? contentItem.implicitHeight : 300
        implicitWidth: comtentItem.implicitWidth < 500 ? comtentItem.implicitWidth : 500
        padding: 1
        //弹出层列表内容
        contentItem: ListView {
            id:listview1
            clip: true
            implicitHeight: contentHeight //弹出层高度
            model: idComboxBoxCtrl.popup.visible ? idComboxBoxCtrl.delegateModel : null //弹出列表数据源
            currentIndex: idComboxBoxCtrl.highlightedIndex //当前选择项
            ScrollIndicator.vertical: ScrollIndicator { } //滚动条
            highlight: Rectangle {color: "#00BFB5"}  //高亮背景
        }
        //弹出层背景
        background: Rectangle {
            border.color: borderColor //边框
            radius: 5 //圆角
            color: bgColor
        }
    }
}