From qml Customizing SplitView example we can see handle is Rectangle with implicitWidth 4
SplitView
{
id: splitView
anchors.fill: parent
handle: Rectangle {
implicitWidth: 4
implicitHeight: 4
color: SplitHandle.pressed ? "#81e889"
: (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")
}
Rectangle {
implicitWidth: 150
color: "#444"
}
Rectangle {
implicitWidth: 50
color: "#666"
}
}
I my pet project I set it to 2, but now it's difficult to resize SplitView because mouse hover area is too tight. I don't want to make it bigger itself, but would like to increase only mouse hover area. I gave some tries, but without success. Is it possible?
This is an unfortunate limitation that will be fixed in 6.2 thanks to a series of community contributions. The solution will then be to use a containmentMask:
https://codereview.qt-project.org/gitweb?p=qt/qtquickcontrols2.git;f=src/quickcontrols2/doc/snippets/qtquickcontrols2-splitview-handle-containmentmask.qml;hb=refs/changes/18/359318/1#l40
SplitView uses the root handle item to determine the touchable area, but if you try to use a plain Item to increase that area, it will affect the visual size of the handle, which is typically not desirable:
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
width: 640
height: 480
visible: true
SplitView {
anchors.fill: parent
handle: Item {
implicitWidth: 32
Rectangle {
implicitWidth: 4
anchors.horizontalCenter: parent.horizontalCenter
height: parent.height
color: SplitHandle.pressed ? "#81e889"
: (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")
}
}
Rectangle {
implicitWidth: 150
color: "#444"
}
Rectangle {
implicitWidth: 50
color: "#666"
}
}
}
Notice the large white area which shouldn't be there:
Related
I'm using Qt 5.12, so I can't access ListView's itemAtIndex which was introduced in Qt 5.13.
I can't upgrade Qt due to my project/platform related restrictions. Is there a way to find the item at a given index for ListView with the Qt versions prior to 5.13?
Otherwise, is there a way to get mouse positions of an item based on index?
I'm having a listview with adjacent items having different width(alternate items have same width). I'm trying to access listview's item which is of less width compared to the adjacent item. The space between two items in the above picture is also an item which is marked as dummy. I'm able to get the index of each item (both actual & dummy), but the x position I get seems to be incorrect as the rectangle cursor is not getting placed in the intended item's position.
Please suggest alternatives that gives the similar functionality as itemAtIndex. Thanks.
In the following example, I declare a MouseArea in each delegate. So, once the mouse hovers over that delegate, we trigger MouseArea.onEntered and can know which item, because that delegate will have the corresponding index value:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
background: Rectangle { color: "#848895" }
ColumnLayout {
anchors.fill: parent
ListView {
id: listView
Layout.fillWidth: true
Layout.preferredHeight: 150
model: 20
orientation: ListView.Horizontal
delegate: MyDelegate { }
ScrollBar.horizontal: ScrollBar {
height: 20
policy: ScrollBar.AlwaysOn
}
highlight: Item {
z: 2
Rectangle {
width: 10
height: parent.height
color: "lightsteelblue"
border.color: "black"
}
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
Frame {
anchors.centerIn: parent
background: Rectangle { }
Text {
text: qsTr("ListView.currentIndex = %1").arg(listView.currentIndex)
}
}
}
}
}
// MyDelegate.qml
import QtQuick
import QtQuick.Controls
Rectangle {
property ListView listView: ListView.view
width: 120
height: listView.height - 20
implicitWidth: width
implicitHeight: height
color: "transparent"
Rectangle {
border.color: "grey"
color: "white"
y: 20
height: parent.height - y * 2
width: parent.width
Text {
anchors.centerIn: parent
text: qsTr("Item %1").arg(modelData + 1)
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: listView.currentIndex = index
}
}
You can Try it Online!
I would like to add Vertical TabBar to my app in a similar manner of what Qt Creater is doing in their app (as shown in picture).
I have been searching how to simple make the TabBar vertical, yet did not find proper answers (thought its common to have it vertical).
Question: How could I make a Vertical Tab to navigate through the different qml files I have? If there are more suitable options, please suggest.
A TabBar just uses a common ListView to display a bunch of TabButtons. You can customize it by overwriting the contentItem property and making the ListView vertical, like this:
// VertTabBar.qml
TabBar {
id: control
contentItem: ListView {
model: control.contentModel
currentIndex: control.currentIndex
spacing: control.spacing
orientation: ListView.Vertical // <<-- VERTICAL
boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded
snapMode: ListView.SnapToItem
highlightMoveDuration: 0
highlightRangeMode: ListView.ApplyRange
preferredHighlightBegin: 40
preferredHighlightEnd: height - 40
}
}
A complete example using Fusion theme.
It is important to set the width of the TabButton else the width is divided by the number of items.
Notice there is a light colour separator line, that comes from ???
Issue: first item can be partially clipped.
Well, there are a lot of things under the hood with QML...
Thus, we cannot really make a TabBar vertical...
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Templates as T
// import QtQuick.Controls.impl
// import QtQuick.Controls.Fusion
// import QtQuick.Controls.Fusion.impl
Page {
id: root
width: 1800
height: 800
Row {
anchors.fill: parent
TabBar {
id: control
width: 200
height: parent.height
contentItem: ListView {
model: control.contentModel
currentIndex: control.currentIndex
spacing: control.spacing
orientation: ListView.Vertical
boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded
snapMode: ListView.SnapToItem
highlightMoveDuration: 0
highlightRangeMode: ListView.ApplyRange
preferredHighlightBegin: 40
preferredHighlightEnd: width - 40
}
Repeater {
model: 50
TabButton {
id: control2
width: control.width
text: "tab blabla blabla %1".arg(model.index)
contentItem: IconLabel {
spacing: control2.spacing
mirrored: control2.mirrored
display: control2.display
icon: control2.icon
text: control2.text
font: control2.font
color: control2.palette.buttonText
}
background: Rectangle {
y: control2.checked || control2.TabBar.position !== T.TabBar.Header ? 0 : 2
implicitHeight: 21
height: control2.height - (control2.checked ? 0 : 2)
border.color: Qt.lighter(Fusion.outline(control2.palette), 1.1)
border.width: 0
gradient: Gradient {
GradientStop {
position: 0
color: control2.checked ? Qt.lighter(Fusion.tabFrameColor(control2.palette), 1.04)
: Qt.darker(Fusion.tabFrameColor(control2.palette), 1.08)
}
GradientStop {
position: control2.checked ? 0 : 0.85
color: control2.checked ? Qt.lighter(Fusion.tabFrameColor(control2.palette), 1.04)
: Qt.darker(Fusion.tabFrameColor(control2.palette), 1.08)
}
GradientStop {
position: 1
color: control2.checked ? Fusion.tabFrameColor(control2.palette)
: Qt.darker(Fusion.tabFrameColor(control2.palette), 1.16)
}
}
}
}
}
}
StackLayout {
id: stack_layout
width: parent.width - 200
height: parent.height
currentIndex: control.currentIndex
Repeater {
model: 50
Item {
Label {
anchors.centerIn: parent
text: "tab %1".arg(model.index)
font.pixelSize: 50
}
}
}
}
}
}
How do I properly change the x, y of an object so that it changes its position when the parent is resized? There is, I will introduce that if I drag the rectangle to the middle, then when the window is resized, it should remain in the middle. (middle for example only, rectangle can be moved freely)
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
Window {
visible: true
width: 640
height: 480
onWidthChanged: {
block.x -= block.previousWidth - width
block.previousWidth = width
}
onHeightChanged: {
block.y -= block.previousHeight - height
block.previousHeight = height
}
Rectangle {
id: block
color: "red"
width: 50
height:50
x: 100
y: 50
property int previousWidth: 0
property int previousHeight:0
Component.onCompleted: {
previousWidth = parent.width
previousHeight = parent.height
}
MouseArea {
anchors.fill: parent
drag.target: block
}
}
}
I must admit, at first I was not impressed by the question. However, when I thought about it, it represents a very interesting and valid use case. So I would be happy to provide a solution.
Solution
I would approach the problem like this:
Make the frame a child of the background image.
Instead of manually calculating the coordinates, use Item.scale to scale the image, effectively preserving the relative position of the frame with regard to the image.
Example
Here is an example I have prepared for you to demonstrate how the proposed solution could be implemented:
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
visible: true
width: 640
height: 480
Image {
anchors.centerIn: parent
source: "alphabet.png"
scale: parent.width/sourceSize.width
Rectangle {
id: frame
width: parent.width/7
height: parent.height/4
border.color: "black"
color: "transparent"
antialiasing: true
MouseArea {
anchors.fill: parent
drag.target: parent
}
}
}
}
Result
The example produces the following result:
Original window
Resized window
The frame is moved
The window is resized again
As I said in my comment, the best solution is anchoring, for example:
Window {
id: root
width: 600
height: 400
title: qsTr("Parent window")
visible: true
flags: Qt.WindowStaysOnTopHint
Grid {
anchors.fill: parent
Repeater {
model: 16
Rectangle {
width: root.width / 4
height: root.height / 4
color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
}
}
}
Rectangle {
border {
width: 5
color: "black"
}
color: "transparent"
width: root.width / 4
height: root.height / 4
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.leftMargin: root.width / 4
anchors.bottomMargin: root.height / 4
}
}
I'm new of qml.
I'm starting to develop a little application with a custom item.
when I try to use in application anchor.top: first_item.bottom, to position the rectangles of the custom component, one below the other doesn't work.
content file main.qml:
import QtQuick 2.5
Item
{
id:main_screen
Rectangle
{
width: 300
height: 60
id: text_content
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
Text {
id: titleText
width: parent.width
height: parent.height
font.pointSize: 20
font.family: "Arial"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: "Test - title"
color: "White"; style: Text.Raised;
}
}
//..................This rectangle is shown below main_screen... so is OK
Custom_item
{
id:first_item
anchors.top: main_screen.bottom
}
//..................This rectangle is not shown below first_item... but it shown on absolute top, in overlap of retangle title
Custom_item
{
id:second_item
anchors.top: first_item.bottom
}
//..................This rectangle is not shown below second_item... but it shown on absolute top, in overlap of retangle title
Custom_item
{
id:third_item
anchors.top: second_item.bottom
}
}
content file Custom_item.qml
import QtQuick 2.5
Item
{
id:testComponent
Rectangle
{
width: 300
height: 60
id: text_content
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
}
}
what am I doing wrong ?
Thanks
The problem lies within the dimensions of the objects your are anchoring to.
Though the Rectangles have a width and a height, the enclosing Item has none, so it is basically 0 pixels in height and width, while the Rectangle protrudes it.
If you don't have any reason for enclosing the Rectangle within the Item, I'd reccomend you, to take the Rectangle itself as the toplevel element of the file.
Reasons for having the Item might be those:
Hiding the Rectangles properties
Having multiple children for the Item that are logically siblings to the Rectangle
... other reasons might exist ;-)
Nevertheless, you need to make sure, that the toplevel item has always the right dimensions. So you should set the width and height, better the implicitWidth and implicitHeight in component declarations.
Example 1: Without an Item
import QtQuick 2.5
Rectangle {
id: root
width: 300
height: 60
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
}
Example 2: With Item
import QtQuick 2.5
Item {
id:testComponent
implicitHeight: 60 // < This
implicitWidth: 300 // < and that are important to have the dimensions
Rectangle {
id: text_content
anchors.fill: parent
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
}
}
You are anchoring all the Rectangle's to the Item hence you are not getting the desired result. Simple change the id of the top Rectangle as follows
Item
{
id: root
Rectangle
{
id:main_screen
...
}
}
How can i draw a drop shadow for a Rectangle visual item on QtQuick 2.0?
I like to draw a drop shadow for my main window (I have a transparent and no-decorated window)
As a workaround for the clipped shadow issue, you can put your Rectangle in an Item, with additionnal margin to take blur radius in account, and apply shadow on that container:
import QtQuick 2.0
import QtGraphicalEffects 1.0
Item {
width: 320
height: 240
Item {
id: container
anchors.centerIn: parent
width: rect.width + (2 * rectShadow.radius)
height: rect.height + (2 * rectShadow.radius)
visible: false
Rectangle {
id: rect
width: 100
height: 50
color: "orange"
radius: 7
antialiasing: true
border {
width: 2
color: "red"
}
anchors.centerIn: parent
}
}
DropShadow {
id: rectShadow
anchors.fill: source
cached: true
horizontalOffset: 3
verticalOffset: 3
radius: 8.0
samples: 16
color: "#80000000"
smooth: true
source: container
}
}
Just use DropShadow from the QtGraphicalEffects module.
A complete, working example:
import QtQuick 2.0
import QtGraphicalEffects 1.0
Rectangle {
width: 640
height: 480
color: "blue"
Rectangle {
id: rect
anchors.centerIn: parent
width: 100
height: 100
color: "red"
}
DropShadow {
anchors.fill: rect
cached: true
horizontalOffset: 3
verticalOffset: 3
radius: 8.0
samples: 16
color: "#80000000"
source: rect
}
}
Note that you will see a number of warnings like this:
file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/DropShadow.qml:391:5:
QML SourceProxy: Binding loop detected for property "output"
file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5:
QML SourceProxy: Binding loop detected for property "output"
file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5:
QML SourceProxy: Binding loop detected for property "output"
file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5:
QML SourceProxy: Binding loop detected for property "output"
file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5:
QML SourceProxy: Binding loop detected for property "output"
file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianGlow.qml:53:5: QML SourceProxy: Binding loop detected for property "output"
Those warnings are QTBUG-28521, which has been fixed in Qt 5.0.2 (which at the time of this writing has not yet been released). Fortunately, there's no actual problem, aside from the annoying console output.
Interesting question... I've been searching for a better way to do this. This is my quick and dirty way of accomplishing a drop shadow effect for a QML Rectangle for the time being.
Rectangle{
width: 500
height: 500
color: "dark grey"
Rectangle {
id: backgroundRect
width: 200
height: 150
radius: 5
anchors.centerIn: parent
color: "red"
Rectangle {
id: dropShadowRect
property real offset: Math.min(parent.width*0.025, parent.height*0.025)
color: "purple"
width: parent.width
height: parent.height
z: -1
opacity: 0.75
radius: backgroundRect.radius + 2
anchors.left: parent.left
anchors.leftMargin: -offset
anchors.top: parent.top
anchors.topMargin: offset
}
}
}
I tried the code above and it in fact adds a shadow, although in my case simply adding another rectangle with a bit on an offset gave me an effect that I liked more.
Rectangle{
id: rec_Shadow
height:rect_withShadow.height
width: rect_withShadow.width
border.color: "#B3B3B3"
color: "#C5C5C5"
anchors{
verticalCenter: rect_withShadow.verticalCenter
horizontalCenter: rect_withShadow.horizontalCenter
horizontalCenterOffset: 5
verticalCenterOffset: 5
}
radius: rect_withShadow.radius
}
Next you add the Rectangle on which you want the shadow, and you call it rect_withShadow