Доброго времени суток :)
Пытаюсь кастомизировать comboBox. Такой вопрос. Можно ли в стилях или в самих настройках comboBox убрать тень сзади, а то в рамках моего интерфейса она уж очень ужасно выглядит.
Заранее спасибо.
ComboBox {
id: box
property color backgroundColor : "white"
property color accentColor : "green"
currentIndex: 2
activeFocusOnPress: true
style: ComboBoxStyle {
id: comboBox
background: Rectangle{
id: rectCategory
border.width: 1
border.color: accentColor
color: backgroundColor
Canvas {
id: arrow
width: parent.height
height: parent.height
antialiasing: true
anchors.right: parent.right
property color strokeStyle: accentColor
property color fillStyle: control.hovered ? accentColor : backgroundColor
property int lineWidth: 1
property bool fill: false
property bool stroke: true
onFillStyleChanged: requestPaint();
onStrokeStyleChanged: requestPaint();
onPaint: {
var ctx = arrow.getContext('2d');
var originX = 0
var originY = 0
ctx.save();
ctx.clearRect(0, 0, arrow.width, arrow.height);
ctx.translate(originX, originX);
ctx.globalAlpha = arrow.alpha;
ctx.strokeStyle = arrow.strokeStyle;
ctx.fillStyle = arrow.fillStyle;
ctx.lineWidth = arrow.lineWidth;
ctx.beginPath();
ctx.moveTo(arrow.width/4,arrow.height/4);
ctx.lineTo(3*arrow.width/4,arrow.height/4);
ctx.lineTo(2*arrow.width/4,3*arrow.height/4);
ctx.lineTo(arrow.width/4,arrow.height/4);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
}
Behavior on fillStyle
{
ColorAnimation {
duration: 250
easing.type: Easing.InOutQuad
}
}
}
}
label: Text {
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pointSize: 15
font.family: "Courier"
font.capitalization: Font.SmallCaps
color: accentColor
text: control.currentText
}
// drop-down customization here
property Component __dropDownStyle: MenuStyle {
__maxPopupHeight: 200
__menuItemType: "comboboxitem"
__backgroundColor: "transparent"
frame:
Rectangle { // background
anchors.fill: parent
border.color: accentColor
border.width: 1
anchors.rightMargin: 2
}
itemDelegate.label: Text {
font.pointSize: 15
font.family: "Courier"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.capitalization: Font.SmallCaps
color: styleData.selected ? backgroundColor : accentColor
Behavior on color
{
ColorAnimation {
duration: 250
easing.type: Easing.InOutQuad
}
}
text: styleData.text
}
itemDelegate.background: Item{
Rectangle { // selection of an item
id: backItem
anchors.fill: parent
anchors.rightMargin: 2
color: styleData.selected ? accentColor : "transparent"
Behavior on color
{
ColorAnimation {
duration: 250
easing.type: Easing.InOutQuad
}
}
}
}
__scrollerStyle: ScrollViewStyle { }
}
property Component __scrollerStyle: ScrollViewStyle { }
}
model: ListModel {
id: cbItems
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
ListElement { text: "Coconut" }
ListElement { text: "Coconut" }
}
width: 200
}