QML question?
About setting the color of the picture.
//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"
}
}
When dragging the ListView up and down, a white blank area appears.
//QML：
//禁止listview控件回弹，解决白色空白出现
boundsBehavior: Flickable.StopAtBounds
About loading pictures, modifying the size, not satisfying the ratio?
//非代码块！
Image.Stretch：图片拉伸自适应；（默认的）
Image.PreserveAspectFit：按比例缩放，不裁剪
Image.PreserveAspectCrop：均匀缩放，必要时裁剪
Image.Tile：像贴瓷砖一样
Image.TileVertically：水平拉伸，垂直平铺
Image.TileHorizontally：垂直拉伸，水平平铺
Image.Pad：原始图像不做处理
About using canvas to draw a drop-down arrow and left arrow
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();
}
}
Paste the package of the entire comboBox below:
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
}
}
}