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" <jer...@bodycad.com>
To: "Jason H" <jh...@gmx.com>
Cc: "interest@qt-project.org Interest" <interest@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 <jh...@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@qt-project.org[Interest@qt-project.org]
http://lists.qt-project.org/mailman/listinfo/interest
_______________________________________________
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest
