Rectangle in QML that is transparent, except for the borders - qml

Is there a way in QML to create a Rectangle with opacity: 0 that still have visible borders? If not, any suggestions on how to work around it?
Thanks

No, opacity is applied for complete visual aspect of item (and opacity:0 makes item full invisible). If you want rectangle with borders and without background, use "transparent" as color.
Rectangle { border.color: "black"; color: "transparent" }

Related

QML - How to correctly set an implicitWith to a GridLayout

I'm using Qml 5.12 and basically trying to set an implicitWidth to a GridLayout.
For that, I have a purple rectangle and set the rectangle's width to the GridLayout.
The red rectangle fit with the GridLayout so I can see the width of my GridLayout.
Here's my code:
Rectangle { anchors.fill: gl; color: "red"; opacity: 0.22 }
Rectangle { id: rect; width: 350; height: 30; color: "purple"; }
GridLayout
{
id: gl
y: 35
implicitWidth: rect.width
columns: 2
Label { text: "This is a test" }
SpinBox { Layout.alignment: Qt.AlignRight }
}
If I run the code, I expect to have my both rectangle with the same width.
But the actual result is that the red rectangle is smaller. So the implicitWidth was not considerate.
Can anybody tell my why ?
Thank's !
The GridLayout compute its own implicitWidth based on its children's implicitWidth. So the value you set gets overwritten by the computed one.
implicitWidth is the width an Item wants to have (and the one it would have if no width is explicitely set). Setting it based on something else than its children or some internal value makes little sense.
Here you want the GridLayout to be the exact size of your Rectangle so just set its width property.

Make rectangle width fill ScrollView

I'm trying to get something in a ScrollView to expand in width to fit the screen. The ScrollView is anchored to the main window.
For example purposes, a Rectangle:
ScrollView {
anchors.fill: parent //mainWindow
Rectangle {
color: "light grey"
height: 1000
width: mainWindow.width
}
}
But when the vertical scrollbar appears, it obscures the Rectangle. I can sort of fix it by using a magic constant:
width: mainWindow.width - 20
But what if somebody has bigger scrollbars on their computer? Also it leaves an ugly empty space on the right when the vertical scrollbar is invisible.
Is there a way to automatically learn what the available space is inside of a ScrollView?
There is no need to explicitly adjust to scroll bar. You can just make it to fill the entire available parent space or so. And if you want specify margins:
ScrollView {
id: scrollView
anchors.fill: parent // mainWindow ?
anchors.centerIn: parent // anchoring as asked
anchors.margins: 20
contentItem:
Rectangle {
id: rectScroll
width: scrollView.viewport.width // set as viewport
height: 1000 // set to what you need
}
}
The original issue was solved mainly due to the width property of Rectangle set to parent.parent.width or scrollView.viewport.width as it is more adequate. The latter is definitely better, as long as the width of precisely viewport of scroll area and not the parent width (which in general not guaranteed to contain only this ScrollView).

Resize rectangle with Text

I want to create a custom drop-down box with text inside. The problem is, when I resize my Rectangle to fold it the Text stays on screen.
Rectangle {
id: dropdown
height: 200
width: 200
color: "red"
Behavior on height {
NumberAnimation {
duration: 1000;
easing.type: Easing.InQuad
}
}
Text {
id: text
anchors.left: parent.left
anchors.top: parent.top
text: "foobar"
}
}
How to solve this?
Ok. I have it thanks to jbache.
I need to put clip:true inside dropdown. According to the documentation of clip:
This property holds whether clipping is enabled. The default clip value is false.
If clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle.
Hence, by setting the property to true, I can ensure that also the child Text will be correctly hidden on drop-down dismiss.

How does opacity work in QML?

I don't understand the behavior of opacity in the following code!
import QtQuick 2.4
Rectangle {
id: root
width: 640; height: 480
Rectangle {
id: wrapper
width: 600; height:440
anchors.centerIn: parent
color: "black"
opacity: 0.5
Rectangle {
id: belowcover
width: cover.width / 2
height: cover.height / 2
anchors.centerIn: parent
color: "green"
z: 1
}
Rectangle {
id: cover
width: root.width / 2
height: root.height / 2
anchors.centerIn: parent
color: "red"
z: 1
}
Rectangle {
id: seen
width: 100; height: 100
radius: width
color: "blue"
z: -1
}
}
}
The wrapper has opacity of 0.5 so that I could see through it in order to see the circle seen. But both cover and belowcover have opacity of 1, and as belowcover is smaller than cover, it should not be seen (or rather I expect it not to be seen, or am I missing something?). But both cover and belowcover are seen. I want only the circle to be seen through wrapper, and belowcover is to remain hidden below cover. How can I do this? I have observed that setting the z of cover higher than that of belowcover does not make the latter hidden.
Edit:
I have observed that when opacity of parent is set to less than 1, the children objects become less opaque, even though their opacity remains at 1, as seen when printed to console. I don't understand why.
The reason why a child having opacity of 1 yet appearing to have transparency when its parent has opacity less than 1 is: opacity goes along the same line as other properties like x, y, etc. Thus, even though child has opacity of 1, it is relative to that of the parent. So if parent has opacity 0.5, and child has opacity of 1, then absolute opacity value of child is actually 0.5. Another child with opacity of 0.5 actually has opacity of 0.5x0.5=0.25. This is analogous to x value of child being 0, when absolute x may not be 0. This design preserves consistency throughout the API.
There are several work-arounds. The one I prefer most is to use semi-transparent colors for the parent. Try setting the color of wrapper to color: "#88000000". You can no longer see the green rectangle belowcover. To see that, you have to set the opacity of cover to some value less than 1, which means cover is opaque. That is how I actually solved my problem.
However, if the parent is an image, then this can't be applied. Then you have to resort to some other techniques. For example:
Using layer. Set layer.enabled: true for parent.
By changing the parent when immediate parent has opacity less than 1.
Many other techniques are listed here.

QML:Transparency for an rectangle is not working

How to set transparency of an rectangle/screen.
I have Following code:
// main.cpp
void main(int argc, char*[] argv)
{
QApplication::setGraphicsSystem("raster");
QApplication app(argc, argv);
QDeclerativeView view;
view.setSource(QUrl::fromLocalFile("loaderTest.qml"));
view.setResizeMode(QDeclarativeView::SizeRootObjectToView);
view.showFullScreen();
//QRegion mask(10, 10, 100, 100);
//view.setMask();
view.show();
app.exec();
}
And QML file is:
//loaderTest.qml
Rectangle
{
id: mainRectangle
width: 1000
height: 700
color: "transparent"
//color: "#00000000"
Image
{
id: image1;
width: 348;
height: 155;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.verticalCenter: parent.verticalCenter;
source: "test.png"
}
Loader
{
id: mainLoader
anchors.fill: parent;
source: "";
focus: true;
}
}
I have one loader and one image in this screen and background color is transparent.
When i run this application it should display transparent background with image in the center (as i have not set loader source).
but what i am getting is image in center with white background filled in the screen, I don’t know who is filling in this white background color as i have mentioned transparent color as background.
I am using QT.4.7.0 and Linux.
I have two planes on my target system one is Video plane and another is graphics plane, when i run GUI with transparent background (set transparency at video place) it should display video on Video place in above example it is showing background as white, as it should have displayed video playing on Video plane.
By default the QDeclarativeView paints a background. Maybe that's the problem in your case.
From http://doc.qt.nokia.com/4.7/qdeclarativeperformance.html
You can also prevent QDeclarativeView from painting its window background if you will provide the background of your application using QML, e.g.
QDeclarativeView window;
window.setAttribute(Qt::WA_OpaquePaintEvent);
window.setAttribute(Qt::WA_NoSystemBackground);
window.viewport()->setAttribute(Qt::WA_OpaquePaintEvent);
window.viewport()->setAttribute(Qt::WA_NoSystemBackground);
My first guess is that the background is white and your rectangle is indeed fully transparent.
What type is LoaderScreen, I guess it is some sort of QDecalarativeView, please forgive any technical misses have not coded Qt/QML for almost a year now. As I remember it the default background of the view was white and what kind of transparency are you hoping to achive anyways?
If you only set a background-color on a QPushButton, the background may not appear unless you set the border property to some value. This is because, by default, the QPushButton draws a native border which completely overlaps the background-color.
This might show a black rectangular box around QPushButton. You will face this issue especially on Linux machines. In order to avoid this you can set the border property to none
widget->setStyleSheet("border:none");