Задать вопрос
@Roma_Glock

Как убрать тень у comboBox в QML?

Доброго времени суток :)

Пытаюсь кастомизировать 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
}
  • Вопрос задан
  • 899 просмотров
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 1
@DancingOnWater
Тенями не занимался, но за ее отбрасывание отвечает DropShadow
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы