Distortion appears after adding DropShadow.
Why do distortions appear?
QML ListView Distortions:
Or maybe there is another way to add shadow to the elements?
Here is the application full code: main.qml - main
delegate - propertiesview
delegate: PropertiesView {
id: delegateElement
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: parent.right
anchors.rightMargin: 10
background: Rectangle {
id: elementDevice
implicitWidth: 100
implicitHeight: 40
opacity: enabled ? 1 : 0.3
color: delegateElement.down ? "#dddedf" : "#eeeeee"
}
DropShadow {
anchors.fill: parent
cached: true
horizontalOffset: 3
verticalOffset: 3
radius: 8.0
samples: 16
color: "#80000000"
source: parent
}
}
}
Try This
delegate: Item{
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: parent.right
anchors.rightMargin: 10
implicitHeight: delegateElement.implicitHeight
PropertiesView {
id: delegateElement
anchors.fill: parent
smooth: true
opacity: 0
background: Rectangle {
implicitHeight: 40
opacity: enabled ? 1 : 0.3
color: delegateElement.down ? "#dddedf" : "#eeeeee"
}
}
DropShadow {
anchors.fill: delegateElement
source: delegateElement
cached: true
horizontalOffset: 3
verticalOffset: 3
radius: 8.0
samples: 16
color: "#80000000"
}
}
Related
I am new to QML and I am trying to implement a horizontal splitview with 2 children. The problem that I am having is that despite setting maximum and minimum widths for the children, the last child always takes up the entire split view and all the others are hidden and have to be manually opened. I have tried defining minimum and maximum widths using Layout.maximum/minimumwidth (which dont work at all) and have tried using fillwidth on the first child of the splitview. Nothing seems to work. I even copied and pasted the code from the qml doc page from splitview and it did the same thing. Here is my code:
import QtQuick 2.0
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.11
import "../buttons"
import "../customWidgets"
Rectangle {
id: conversationsPage
anchors.fill: parent
height: 455
width: 800
SplitView {
id: splitView
anchors.fill: parent
orientation: Qt.Horizontal
Rectangle {
id: sideBar
Layout.minimumWidth: 200
Layout.preferredWidth: 300
Layout.maximumWidth: 500
Layout.fillWidth: true
color: "#b9b9b9"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.topMargin: 0
clip: true
Rectangle {
id: sideBarTopBar
y: 0
z: 2
height: 44
color: "#e868ff"
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 0
anchors.rightMargin: 0
SearchBar {
id: conversationSearchBar
anchors.left: parent.left
anchors.right: newConversationBtn.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
anchors.topMargin: 10
anchors.leftMargin: 10
anchors.rightMargin: 10
}
IconBtn {
id: newConversationBtn
width: 35
height: 35
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 10
btnIconSource: "../images/icons/plus.svg"
}
}
ScrollView {
id: conversationsListScroll
anchors.left: parent.left
anchors.right: parent.right
anchors.top: sideBarTopBar.bottom
anchors.bottom: parent.bottom
z: 1
anchors.topMargin: 0
ColumnLayout {
id: conversationListLayout
x: 0
y: 0
width: conversationsListScroll.width
clip: true
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
ConversationTab {
Layout.fillWidth: true
}
}
}
}
Rectangle {
id: conversationView
Layout.fillWidth: false
Layout.minimumWidth: 300
Layout.maximumWidth: 500
color: "#ff0000"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 0
anchors.bottomMargin: 0
}
}
Do you guys have any idea why the split view isnt working the way I want it to?
I noticed a couple of things, first, in SplitView from Quick Controls 2, you must use the SplitView attached property instead of the Layout attached property.
Secondarily, I also noticed that you have anchors specified inside the direct children of the SplitView, which have no effect and can be removed. I am not sure, but it seems like the child with SplitView.fillWidth: true should not have a maximum width set, as both children having maximum widths can prevent the SplitView from filling its parent Rectangle fully (you may still have a use case for this, but I removed it for this reason).
Here is the code with these recommendations:
SplitView {
id: splitView
anchors.fill: parent
orientation: Qt.Horizontal
Rectangle {
id: sideBar
SplitView.minimumWidth: 200
SplitView.preferredWidth: 300
SplitView.fillWidth: true
color: "#b9b9b9"
clip: true
// children here...
}
Rectangle {
id: conversationView
SplitView.fillWidth: false
SplitView.minimumWidth: 300
SplitView.maximumWidth: 500
color: "#ff0000"
}
}
I have the following SpinBox model which I am trying to recreate using the new QtQuick.Control 2, because this one it's using version 1. And I've encountered some problems which I am not sure how to solve.
On the validation side, I should not be able to write anything on the suffix side, just on the number part. Also I should not be allowed to remote the suffix from there while editing
My width should be fixed and I should not be allowed to write more than that.
My Code:
import QtQuick 2.6
import QtQuick.Controls 2
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
SpinBox {
id: root
property color borderColor: "red"
property string multipleValuesTooltip: ""
property color backgroundColor: "yellow"
property bool showTooltip: true
font.pointSize: 10
property int maximumValue: 50
property int minimumValue: 0
property string suffix: ""
property int decimals: 0
to: maximumValue
from: minimumValue
editable: true
rightPadding: {
console.log(root.contentItem.height)
return Math.max(40, Math.round(root.contentItem.height))
}
textFromValue: function(value, locale) {
return qsTr("%1"+suffix).arg(value);
}
contentItem: TextInput {
z: 5
text: root.textFromValue(root.value, root.locale)
font: root.font
color: "white"
selectionColor: "#21be2b"
selectedTextColor: "#ffffff"
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
validator: root.validator
inputMethodHints: Qt.ImhFormattedNumbersOnly
}
up.indicator: Rectangle {
height: parent.height / 2
anchors.right: parent.right
anchors.top: parent.top
implicitWidth: 20 // Adjust width here
implicitHeight: {
console.log(root.contentItem.height)
return root.contentItem.height - 10
}
color: root.up.pressed ? "red" : "pink"
Image {
source: "qrc:/resources/arrow-down.png"
height: Math.min(15, sourceSize.height)
width: Math.min(30, sourceSize.width)
anchors.centerIn: parent
rotation: 180
}
}
down.indicator: Rectangle {
height: parent.height / 2
anchors.right: parent.right
anchors.bottom: parent.bottom
implicitHeight: root.contentItem.height - 10
implicitWidth: {
console.log("W: ",root.width)
return 20
}
color: root.down.pressed ? "red" : "pink"
Image {
source: "qrc:/resources/arrow-down.png"
height: Math.min(15, sourceSize.height)
width: Math.min(30, sourceSize.width)
anchors.centerIn: parent
}
}
background: Item {
implicitHeight: root.height === 0 ? Math.max(30, Math.round(root.contentItem.height * 1.2)) : root.height
implicitWidth: root.contentItem.width + leftPadding +rightPadding
baselineOffset: root.anchors.baselineOffset
Rectangle {
id: baserect
anchors.fill: parent
color: "purple"
radius: 3
}
Rectangle { // Border only
anchors.fill: parent
border.color: "black"
color: "transparent"
radius: 3
}
Rectangle {
anchors.right: parent.right
anchors.rightMargin: root.rightPadding - 10
anchors.verticalCenter: parent.verticalCenter
color: "black"
height: parent.height - parent.height/5
width: 1
}
}
}
I couldn't find any documentation or any kind of information regarding this wherever I've searched for. If any of you could help me I would be really grateful.
Requirement: I am building a Settings app in QML, in which the I have divided screen into a grid. On the left hand side of the Grid, there are buttons : Home, Connectivity, Settings and Quit. and on the right hand side, corresponding display should be drawn. Currently, I have added a rectangle, and when I click on buttons like Home, Settings, connectivity etc.. . Code written inside the rectangle of StackLayout is executed successfully.
Instead of writing code in a rectangle, i want to write code in a separate file like settings.qml, connectivity.qml.
How to call the different file by clicking on buttons and setting current Index
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id:main1
visible: true
x:0
y:20
width: Screen.width
height: Screen.height
title: qsTr("Settings")
GridLayout {
id: gridLayout
width: parent.width
height:main1.height
columns: 2
Rectangle {
id: left_rect
width: Screen.width/4
height: gridLayout.height
color:"yellow"
Button {
id: button
text: qsTr("Home")
anchors.right: parent.right
anchors.rightMargin: 5
anchors.left: parent.left
anchors.leftMargin: 5
anchors.top: parent.top
anchors.topMargin: 5
onClicked: {
layout.currentIndex = 0
}
}
Button {
id: button1
x: 1
y: -4
text: qsTr("Connectivity")
anchors.topMargin: 59
anchors.leftMargin: 5
anchors.left: parent.left
anchors.top: parent.top
anchors.rightMargin: 5
anchors.right: parent.right
onClicked: {
layout.currentIndex = 1
}
}
Button {
id: button2
x: 5
y: -8
text: qsTr("Settings")
anchors.topMargin: 112
anchors.leftMargin: 5
anchors.left: parent.left
anchors.top: parent.top
anchors.rightMargin: 5
anchors.right: parent.right
onClicked: {
layout.currentIndex = 2
}
}
Button {
id: button3
x: 6
y: -16
text: qsTr("Quit")
anchors.topMargin: 172
anchors.leftMargin: 5
anchors.left: parent.left
anchors.top: parent.top
anchors.rightMargin: 5
anchors.right: parent.right
onClicked: {
Qt.quit()
}
}
}
Rectangle {
id: right_rect
width: ( Screen.width/4 )*3
height: Screen.height
color:"green"
StackLayout {
id: layout
anchors.fill: parent
currentIndex: 0
Rectangle {
color: 'teal'
implicitWidth: 200
implicitHeight: 200
}
Rectangle {
color: 'plum'
implicitWidth: 300
implicitHeight: 200
}
Rectangle {
color: 'orange'
implicitWidth: 300
implicitHeight: 200
}
}
}
}
Where you currently have
Rectangle {
color: 'teal'
implicitWidth: 200
implicitHeight: 200
}
replace with
qmlClassName {
id: someId
}
I'm trying to apply a DropShadow effect into my Rectangle. After I did it, text and icon inside are getting blurred. Any idea how to fix it?
import VPlayApps 1.0
import QtQuick 2.9
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.2
App {
Rectangle {
id: buttonOverview
width: app.width * 0.12
height: buttonQuit.width
color: "#439fd0"
radius: 3
anchors.left: parent.left
anchors.leftMargin: app.width * 0.034
gradient: Gradient {
GradientStop {
position: 0
color: "#48a4d5"
}
GradientStop {
position: 1
color: "#01618c"
}
}
AppImage {
id: appImage
width: 44
height: 43
anchors.bottom: spacerProjectOverview.top
anchors.horizontalCenter: parent.horizontalCenter
source: "../../../WinCan/Icons/projectOverview.png"
fillMode: Image.PreserveAspectFit
}
Text {
id: textOverview
color: "#ffffff"
text: qsTr("Project\nOverview")
anchors.topMargin: 5
anchors.top: spacerProjectOverview.bottom
anchors.bottomMargin: parent.height * 0.18
anchors.bottom: parent.bottom
font.bold: true
horizontalAlignment: Text.AlignHCenter
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 14
}
MouseArea {
anchors.fill: parent
onClicked: {
buttonQuit.opacity = 0
}
}
Rectangle {
id: spacerProjectOverview
width: parent.width
height: parent.height * 0.05
color: "transparent"
anchors.verticalCenter: parent.verticalCenter
}
anchors.verticalCenter: parent.verticalCenter
}
DropShadow {
anchors.fill: buttonOverview
horizontalOffset: 1
verticalOffset: 6
radius: 5
samples: 5
source: buttonOverview
color: "black"
}
}
Expected : Getting shadow and nice looking text and icons
Actual : Getting shadow but text and icons are blurry
Your DropShadow is being applied to buttonOverview components area and as it is defined below the buttonOverview it will be positioned on top of it. If i am understanding your requirements you should move the DropShadow above the buttonOverview Rectangle component.
I'm showing a message on the bottom:
Msg.qml
import QtQuick 2.4
Item {
property alias text: mf.text
anchors.fill: parent
antialiasing: false
opacity: 0.9
z: 100
MsgForm {
id: mf
width: parent.width
y: parent.height - height - 5
}
}
MsgForm.ui.qml
import QtQuick 2.4
Item {
property alias text: msg.text
width: 200
id: message
height: msg.height+10
Rectangle {
id: rectangle
color: "#fb9191"
anchors.fill: parent
border.color: "#fd6666"
border.width: 2
Text {
id: msg
anchors.top: parent.top
anchors.topMargin: 2
textFormat: Text.PlainText
anchors.right: parent.right
anchors.rightMargin: 4
anchors.left: parent.left
anchors.leftMargin: 4
wrapMode: Text.WordWrap
clip: false
font.bold: true
font.pointSize: 12
font.family: "Tahoma"
}
}
}
How can I animate the form to appear from the bottom smoothly?
After the animation, if the window resizes, the message must stay always on the bottom.
You can play with anchors.bottomMargin property to raise the message item from the bottom.
import QtQuick 2.4
Item {
property alias text: mf.text
anchors.fill: parent
antialiasing: false
opacity: 0.9
z: 100
MsgForm {
id: mf
property bool showing: false
width: parent.width
anchors{
bottom: parent.bottom
bottomMargin: mf.showing ? 0 : -mf.height
Behavior on bottomMargin{
NumberAnimation{ }
}
}
}
}
Thanks everyone. In the end I've solved the issue by following advices received in the qtcentre forum.
The desired effect can be achieved easily by defining a local numerical property that is use to bind to either an anchors.XXXXmargin or the y property expression.
Following this approach a possible solution is the following:
MsgForm {
property bool showing: false
property int position: showing ? height : 0
width: parent.width
y: parent.height - position
Behavior on position {
NumberAnimation {duration: 500}
}
}
You can make an animation on the opacity change:
Msg.qml
import QtQuick 2.4
Item {
property alias text: mf.text
anchors.fill: parent
antialiasing: false
opacity: 0.9
z: 100
MouseArea{
anchors.fill: parent
onClicked: mf.opacity = !mf.opacity
}
MsgForm {
id: mf
//y: parent.height - height - 5
opacity:0
Behavior on opacity {
NumberAnimation{
duration:600
}
}
width: parent.width
anchors.bottom: parent.bottom
}
}
or any other NumberAnimation. I recommand you to create States, within it do some propertyChanges, and on some actions, example button clicked change states.
example in your MsgForm.ui.qml add:
MouseArea{
anchors.fill: parent
onClicked: mf.state= "show"
}
and in the action, example:
in my mouseArea I change the state of mf
MouseArea{
anchors.fill: parent
onClicked: mf.state= "show"
}
If you want an Animation on the y try this:
MsgForm.ui.qml
import QtQuick 2.4
Item {
id: message
property alias text: msg.text
width: parent.width
height: msg.height+10
Rectangle {
id: rectangle
color: "#fb9191"
anchors.fill: parent
border.color: "#fd6666"
border.width: 2
Text {
id: msg
anchors.top: parent.top
anchors.topMargin: 2
textFormat: Text.PlainText
anchors.right: parent.right
anchors.rightMargin: 4
anchors.left: parent.left
anchors.leftMargin: 4
wrapMode: Text.WordWrap
clip: false
font.bold: true
font.pointSize: 12
font.family: "Tahoma"
}
}
Behavior on y {
NumberAnimation{
duration:300
}
}
states: [
State {
name: "show"
PropertyChanges {
target: message
y: parent.height - height
}
},
State {
name: "hide"
PropertyChanges {
target: message
y: parent.height + height + 5
}
}
]
}
Msg.qml
import QtQuick 2.4
Rectangle {
property alias text: mf.text
width:800
height: 480
antialiasing: false
opacity: 0.9
z: 100
MouseArea{
anchors.fill: parent
onClicked: mf.state= "show"
}
MsgForm {
id: mf
//y: parent.height - height - 5
y: parent.height +height + 5
width: parent.width
}
}