[Interest] iOS style menubar?

[Jason H]

So I got something working using GraphicalEffects:


import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0

ApplicationWindow {
	id: root
	visible: true

	Component.onCompleted:  {
		button1.checked = true;
	}
	width: 320
	height: 50
	color: "gray"
	ExclusiveGroup { id: buttonGroup }


	Row {
		id: row
		visible:false
		height: parent.height *.5
		width: parent.width *.75
		anchors.centerIn: parent
		Rectangle {
			property bool checked: false
			property ExclusiveGroup exclusiveGroup: buttonGroup
			id: button1
			width: parent.width/3
			height: parent.height
			color: "blue"
			Text {
				text:"1"
				anchors.fill: parent
				horizontalAlignment: Text.AlignHCenter
				verticalAlignment: Text.AlignVCenter
				color: parent.checked ? "black" : "white"
				font.pixelSize: parent.height /2
			}
			MouseArea {
				anchors.fill: parent
				onClicked: parent.checked=true
			}
			onExclusiveGroupChanged: {
				if (exclusiveGroup)
					exclusiveGroup.bindCheckable(button1)
			}
			onCheckedChanged: {
				color = checked  ? "white" : "blue"
			}
		}
		Rectangle {
			property bool checked: false
			property ExclusiveGroup exclusiveGroup: buttonGroup
			id: button2
			width: parent.width/3
			height: parent.height
			color: "blue"
			Text {
				text:"2"
				anchors.fill: parent
				horizontalAlignment: Text.AlignHCenter
				verticalAlignment: Text.AlignVCenter
				color: parent.checked ? "black" : "white"
				font.pixelSize: parent.height /2
			}
			onExclusiveGroupChanged: {
				if (exclusiveGroup)
					exclusiveGroup.bindCheckable(button2)
			}
			onCheckedChanged: {
				color = checked  ? "white" : "blue"
			}

		}
		Rectangle {
			property bool checked: false
			property ExclusiveGroup exclusiveGroup: buttonGroup
			id: button3
			width: parent.width/3
			height: parent.height
			color: "blue"
			Text {
				text:"3"
				anchors.fill: parent
				horizontalAlignment: Text.AlignHCenter
				verticalAlignment: Text.AlignVCenter
				color: parent.checked ? "black" : "white"
				font.pixelSize: parent.height /2
			}
			onExclusiveGroupChanged: {
				if (exclusiveGroup)
					exclusiveGroup.bindCheckable(button3)
			}
			onCheckedChanged: {
				color = checked  ? "white" : "blue"
			}
		}
	}
	Rectangle {
		visible: false
		id: opacityMask
		color: "black"
		anchors.fill: parent
		radius: height / 4
		clip: true
		smooth: true
	}
	OpacityMask {
		anchors.fill: row
		source: row
		maskSource: opacityMask
	}
	Row {
		anchors.fill: row

		MouseArea {
			x: button1.x
			y: button1.y
			width: button1.width
			height: button1.height
			onClicked: button1.checked=true
		}

		MouseArea {
			x: button2.x
			y: button2.y
			width: button2.width
			height: button2.height
			onClicked: button2.checked=true
		}
		MouseArea {
			x: button3.x
			y: button3.y
			width: button3.width
			height: button3.height
			onClicked: button3.checked=true
		}

	}
}

 

Sent: Tuesday, May 10, 2016 at 1:12 PM
From: "Jérôme Godbout" <jerome at bodycad.com>
To: "Jason H" <jhihn at gmx.com>
Cc: "interest at qt-project.org Interest" <interest at qt-project.org>
Subject: Re: [Interest] iOS style menubar?

The only way I got this working is by doing some ShaderEffect with a custom FragmentShader. That way you can control the alpha for each fragment and make whatever you want. Note, it's not a good idea to have too many of them but for some specific task it should be ok. 
 
If you only want to have 2 round corner, you could use rectangle with corner and another without above the rounded with smaller dimension of the radius and x,y offset according to top/bottom/left/right corner wanted:
 
  
   -----------
  /           \           
 /             \        |--------------|
|               |    +  |              |
|               |       |              |
 \             /        |              |
  \-----------/         |______________|
 
z: 0                     z:1
 
On Tue, May 10, 2016 at 12:56 PM, Jason H <jhihn at gmx.com> wrote:I'm looking for a toggle-able mnubar, iOS style. It should be easy enough, except that it is rounded on two corners (left or right edge).

Does anyone know how to to just 2 rounded corners or of a complete QML item?
_______________________________________________
Interest mailing list
Interest at qt-project.org[Interest at qt-project.org]
http://lists.qt-project.org/mailman/listinfo/interest