I have the following QML layout of the main application window. I need to create shadow for borderless window, that's why inner rectangle is a bit smaller than the application border (I found this solution on the StackOverflow before). The problem is when a new item is pushed to the nested StackView, it moves from the outside of the inner rectangle. How should I fix it?
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
import org.b2soft.qml 1.0
ApplicationWindow {
id: window
visible: true
width: 800
height: 600
title: qsTr("Test")
color: "#00000000"
flags: Qt.FramelessWindowHint | Qt.Window
Rectangle {
id: rect
width: 700
height: 500
anchors.centerIn: parent
Column {
id: column
anchors.fill: parent
Row {
id: topbar
anchors.left: parent.left
anchors.right: parent.right
height: 24
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width
color: "#37373a"
}
}
StackView {
id: rootStackView
anchors.left: parent.left
anchors.right: parent.right
height: parent.height - topbar.height
initialItem: Qt.resolvedUrl("login.qml")
}
Connections {
target: QMLWrapper
onLoginCompleted: rootStackView.push(Qt.resolvedUrl("main_stack.qml"))
}
}
}
DropShadow {
anchors.fill: rect
radius: 40
samples: 32
verticalOffset: 14
source: rect
color: "#40000000"
}
}
Below is the GIF with the issue:
I'd go on a limb and assume that's the default intended behavior. QML elements do not clip by default, out of concern it might be a heavy operation.
And the stack view is usually contained inside the application window, so this issue would not be prominent.
But yours is nested into a smaller element, leaving room for the artifact to manifest.
All you have to do is set clip: true for rect.
Related
I tried to create a child window to show an article that can't be fully displayed by the window. For now, I can slide the page through dragging the ScrollBar (QML Type), but I want to slide it by using the mouse wheel as well.
Here is the code:
import QtQuick 2.2
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
id:privacyWindow
width: 640
height: 480
title:qsTr("Privacy")
Rectangle {
id: privacy
clip: true
width: privacyWindow.width
height: privacyWindow.height
anchors.centerIn: parent
Rectangle {
id: textArea
clip: true
width: privacyWindow.width - 150
height: privacyWindow.height
anchors.centerIn: parent
Text {
id: content
width: textArea.width
text: ""
wrapMode: Text.WordWrap
textFormat: Text.RichText
//x: -horizontalBar.position * width
y: -verticalBar.position * height
}
}
ScrollBar {
id: verticalBar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Vertical
size: privacy.height / content.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
}
Any help would be greatly appreciated! Thank you. :)
I have managed to solve it by replacing Rectangle with Flickable.
import QtQuick.Controls 2.12
Window {
id: privacyWindow
width: 640
height: 480
title:qsTr("Privacy")
Flickable {
id: flickable
clip: true
width: privacyWindow.width - 150
height: privacyWindow.height
contentWidth: content.width
contentHeight:content.height
anchors.centerIn: parent
Text {
id: content
width: flickable.width
text: ""
wrapMode: Text.WordWrap
textFormat: Text.RichText
}
ScrollBar.vertical: ScrollBar {
parent: flickable.parent
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
}
I'm new at QML and I have a very confusing situation.
So, this is my main.qml file:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
Window {
id:rootWin
visible: true
width: 350
height: 330
ConnectBox
{
id:boxConnect
MouseArea
{
id: connectMouse
hoverEnabled: true
anchors.fill: boxConnect
}
}
Rectangle {
id: randomRec
width: parent.width/2
height: parent.height/6
// x: 50
anchors.top: boxConnect.bottom
// anchors.horizontalCenter: parent
anchors.topMargin: 10
border.color: "dimgray"
border.width: 5
radius: 14
}
}
ConnectBox.qml:
import QtQuick 2.0
Rectangle {
id: connectRec
width: parent.width/2
height: parent.height/6
anchors.centerIn: parent
border.color: "dimgray"
border.width: 5
radius: 14
}
I want it to be randomRec below boxConnect, so it does but it is all left and it only moves when I put for example x: 50 but its not convenient for every size of the window.
First off: I'd advise to put the anchors that are related to each other all on the same file.
But to get the randomRec to center below the connectBox you should use the following anchors:
Rectangle {
id: rect1
width: 100
height: 200
color: "red"
anchors.centerIn: parent
}
Rectangle {
id: rect2
width: 75
height: 50
color: "yellow"
anchors.top: rect1.bottom
anchors.horizontalCenter: rect1.horizontalCenter
}
So I guess you where almost there, with the horizontalCenter: parent line, which should have .horizontalCenter as well. However, I anchored it on rect1 since that is what you want (let's say you might want to move the boxConnect in the future... you would have to find all of the references)
like the web pages,when content's high beyond the rectangle,there is a scrollbar.
Is there anyone else who can help me?
I have tried with listview,but I can't use it in a rectangle
There is an example in the docs, how to use ScrollBar without a Flickable:
import QtQuick 2.7
import QtQuick.Controls 2.0
Rectangle {
id: frame
clip: true
width: 160
height: 160
border.color: "black"
anchors.centerIn: parent
Text {
id: content
text: "ABC"
font.pixelSize: 160
x: -hbar.position * width
y: -vbar.position * height
}
ScrollBar {
id: vbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Vertical
size: frame.height / content.height
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
}
ScrollBar {
id: hbar
hoverEnabled: true
active: hovered || pressed
orientation: Qt.Horizontal
size: frame.width / content.width
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}
adding rectangle into flickable solved my problem
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.5
import QtQuick 2.8
Item {
id: item1
visible: true
width: 800
height: 600
ScrollView {
id: frame
clip: true
anchors.fill: parent
//other properties
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
Flickable {
contentHeight: 2000
width: parent.width
Rectangle {
id : rectangle
color: "#a7c4c6"
radius: 6
//visible: !busyIndicator.running
anchors.fill: parent
}
}
}
}
I've created a new project and added a scrollview with a rectangle. When I start the project the rectangle is not displayed but if I add an other control it appears. I'm not sure what I'm doing wrong, I want to see the rectangle always.
import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
id: mainWindow
ScrollView{
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 0
anchors.bottomMargin: 0
width: 289
Rectangle{
anchors.fill: parent
color: "blue"
MouseArea
{
anchors.fill: parent
onClicked: console.log("Click")
}
}
}
}
With this code I get the following window (rectangle is not visible):
However if I add a button to this ScrollView...
ScrollView{
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 0
anchors.bottomMargin: 0
width: 289
Rectangle{
anchors.fill: parent
color: "blue"
MouseArea
{
anchors.fill: parent
onClicked: console.log("Click")
}
}
Button{
text:"Test"
}
}
The rectangle appears:
What's wrong with my first code (without the button)?
The ScrollView has two sizes, the size of the control view in the UI, and the size of the content of the ScrollView.
When you add the Rectangle without the Button, you instruct the Rectangle to fill its parent. The parent in this case is the content of the ScrollView. By default that content is empty, and you've instructed the Rectangle to fill this empty space. Therefore there is nothing displayed.
When you add the Button which has an explicit size, it forces the content of the ScrollView to be non-empty, so now the Rectangle has something to fill, thus you see it.
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