I want my application to use an image as a Background. So I use this code:
In my ApplicationWindow:
Image {
id: bkgImage
source: "qrc:/images/bkg.jpg"
anchors.centerIn: parent
}
To add a button
Button {
id: btnAsistencia
text: qsTr("ASISTENCIA")
font.pixelSize: fhButttonTextSize
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: btnInscripcion.bottom
anchors.topMargin: parent.height*0.1
}
The code above is for the second button, but I added one before in the exact same way. This is the result:
The second button becomes transparent over the image. How can I prevent this?
You can set the background colour of the button with the Material.background attached property:
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
ApplicationWindow {
id: window
width: 400
height: 440
visible: true
color: "red"
Button {
text: qsTr("ASISTENCIA")
Material.background: "#666"
}
}
The default colour has some transparency:
http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/src/imports/controls/material/qquickmaterialstyle.cpp#n862
Related
I am using QML's inbuilt DropShadow type (import QtGraphicalEffects) to generate a shadow of some rectangles that are contained within an Item. The DropShadow is also a child of said Item. But sometimes the shadow is rendered very badly. I am dynamically creating the screen and adding it to a SwipeView; the code is as follows:
swipeView.addItem(tasksScreen.createObject(swipeView))
swipeView.incrementCurrentIndex()
"tasksScreen" is the screen that the rectangles and DropShadow are part of.
The following video depicts the issue and the code that generates this behavior:
https://yadi.sk/i/mwl_8IZmm_jetQ
I believe the issue is you are making the DropShadow a child of its source - which is creating a looping dependency.
Instead, try making it a sibling of your Item or even better, set it up as your Item's layer.effect.
You can see these different techniques in the DropShadow documentation:
https://doc.qt.io/qt-5/qml-qtgraphicaleffects-dropshadow.html
The problem is the source property in your code you have set the source as the parent item in your code. Give the source as your visual object(Rectangle). I have attached the code for your reference.
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Component {
id: swipeviewComponentId
Item {
id: itemId
Rectangle {
id: rectangleId
anchors.fill: parent
anchors.margins: 10
radius: 10
}
DropShadow {
anchors.fill: source
horizontalOffset: 3
verticalOffset: 3
radius: 8.0
samples: 17
color: "#80000000"
source: rectangleId
}
}
}
Column {
anchors.fill: parent
anchors.margins: 10
spacing: 10
SwipeView {
id: swipeViewId
width: parent.width
height: parent.height - addButtonId.height - (2 * parent.spacing) - pageIndicatorId.height
}
PageIndicator {
id: pageIndicatorId
currentIndex: swipeViewId.currentIndex
count: swipeViewId.count
anchors.horizontalCenter: parent.horizontalCenter
}
Button {
id: addButtonId
width: parent.width
height: 40
text: "Add item"
onClicked: {
swipeViewId.addItem(swipeviewComponentId.createObject(swipeViewId,
{height: swipeViewId.height, width: swipeViewId.width}))
swipeViewId.incrementCurrentIndex()
}
}
}
}
i used methods here to use material design in my QtQuick project and used Accent and Themes from here controls loading in material style correctly in normal qml files , but in qml files loaded by loader result is like this:
this loader is in main.qml :
Loader{
id:myLoader
anchors.fill: parent
source: "LoginPage.qml"
}
and here is my dynamic qml file
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.3
import QtGraphicalEffects 1.0
Rectangle{
Material.theme: Material.Dark
Material.accent: Material.Teal
property string error_msg: ""
id: loginPage
Button {
id: button
width: 80
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 0
font.family: "B Nazanin"
enabled: webView.loadProgress == 100 ? true:false
KeyNavigation.tab: button1
Material.accent: Material.Orange
onClicked: {
login()
}
}
}
The dark there is presumed to have a dark background. It will not set your window background for you, it only affects GUI controls. And the button in particular doesn't use use the accent color, just the foreground color, unless toggle is enabled, in which case it will use the accent color to signify that.
Material.theme: Material.Dark
Material.accent: Material.Teal
Rectangle {
anchors.fill: r2
color: "#262626"
}
Row {
id: r1
Button {
text: "test"
checkable: true
Material.accent: Material.Orange
}
Button {
text: "test"
checkable: true
}
}
Rectangle {
anchors.fill: r2
}
Row {
id: r2
anchors.top: r1.bottom
Button {
text: "test"
checkable: true
Material.accent: Material.Orange
}
Button {
text: "test"
checkable: true
}
}
As you see, on a white background, the dark theme button looks blurry and washed out. If you want to set the button color, that would be the Material.background whereas the text would be Material.foreground.
I had a similar problem.
Just use ApplicationWindow as your root element and it will work.
And additionally you have to load Material before instantiating QML.
QGuiApplication application(argc, argv);
QQmlApplicationEngine engine;
QQuickStyle::setStyle("Material");
I have 4 QML files: MainMenu.qml, AppArea.qml, Result.qml and main.qml.
When my app starts, I want to see first page as MainMenu.qml fullscreen. There is a button (on MainMenu.qml) to start AppArea.qml. When I click the the button, I want to start AppArea.qml as fullscreen new window.
There is a button (on AppArea.qml), when I click that button, I want to show Result.qml but I want to see Result.qml on AppArea.qml, I mean when Result.qml come outs, AppArea.qml will not disappear but Result.qml will appear on AppArea.qml.
There is a button on Result.qml. When I click the button, the Repeater in AppArea.qml will regenerate, because maybe model of Repeater changing like 1, 2, 3, 4.... There is a button on AppArea.qml, when I click the button, I want to open MainMenu.qml as a fullscreen new window like AppArea.qml.
Actually you can think basic: My app is a game like this:
How way should I choose for these jobs?
In addition to the mentioned post, in your case you are using the component from qml file, so you need to load the component first, your main.qml can be like this:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
id: mainWindow
title: "Main window"
visible: true
flags: Qt.Dialog
modality: Qt.ApplicationModal
Loader{
id: mainMenuLoader
}
Component.onCompleted: {
mainMenuLoader.source="mainMenu.qml"
var mainMenu = mainMenuLoader.item.createObject(mainWindow);
mainWindow.hide()
}
}
and your mainMenu.qml can look like this:
import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
Component {
id: mainMenu
Window {
id:mmenu
title: "Main Menu"
width: 600
height: 600
visible: true
flags: Qt.Dialog
modality: Qt.ApplicationModal
Loader{
id: appAreaLoader
}
Text {
text: "This is mainMenu"
}
Button{
id: loadAppArea
anchors.centerIn: parent
text: "Start Game"
onClicked: {
appAreaLoader.source="appArea.qml"
var appArea = appAreaLoader.item.createObject(mainMenu);
hide()
}
}
}
}
you will need to do the same for successive windows ...etc.
While for result, you need to use a MouseArea:
appArea.qml:
Component {
id: appMenu
Window {
id:appMenuWindow
title: "App Menu"
width: 600
height: 600
visible: true
flags: Qt.Dialog
modality: Qt.ApplicationModal
Loader{
id:anotherLoader
visible: true
anchors.left: appMenuText.left
anchors.top: appMenuText.bottom
width: parent.width/3
height: parent.height/3
}
Text {
id: appMenuText
text: "This is App Area"
anchors.centerIn: parent
}
Button{
id: loadResult
text: "Show Result"
onClicked: {
anotherLoader.source = "result.qml"
anotherLoader.visible=true
}
}
Button{
anchors.right: parent.right
id: loadMainMenu
text: "Open main Menu"
onClicked: {
hide()
//mmenu.show()
anotherLoader.setSource("main.qml")
}
}
}
}
result.qml:
Rectangle{
color: "green"
Text {
anchors.centerIn: parent
id: resultxt
text: qsTr("This is result, Click to close")
}
MouseArea {
anchors.fill: parent
onClicked: { anotherLoader.visible = false
}
}
}
The example below illustrates my problem.
I create a small Rectangle at the top left and clicking on it toggles the color between red and green.
Next, I create a StackView and I push a Rectangle to the StackView and bind the color of this second Rectangle to the color of the top-left rectangle
Expected behavior would be that, clicking on the top-left Rectangle would also change the color of the Rectangle on the StackView since the color was binded. Unfortunately, this is not the case.
Note that things work fine when pushing stackRect2 to the stack (see line in comment)
import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
id: mainWindow
visible: true
width: 1280
height: 720
Rectangle {
id: rect
width: 100
height: 100
focus: true
color: toggle? "red":"green"
property var toggle:false;
MouseArea {
anchors.fill: parent
onClicked: rect.toggle = !rect.toggle
}
}
StackView {
id: stack
width: 100
height:100
anchors.left: rect.right
anchors.leftMargin: 10
Component.onCompleted: {
stack.push ({item:stackRect, properties: {color:rect.color}})
//stack.push ({item:stackRect2})
}
}
Component {
id:stackRect
Rectangle {}
}
Component {
id:stackRect2
Rectangle {color:rect.color}
}
}
Apparently, this behavior is expected behavior and is in line with Component::createObject().
Using
stack.push (stackRect, {color:Qt.binding(function() { return rect.color})})
works just fine.
I created a component (SidebarMenuButton) that is used in the main qml file multiple times. The button has styles that should be inherited by all it's 'instances'. Here is the SidebarMenuButton.qml:
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Button {
width: buttonNewMessage.width
height: buttonNewMessage.height
anchors {
horizontalCenter: parent.horizontalCenter
topMargin: 5
}
style: ButtonStyle {
background: Rectangle {
color: 'transparent'
}
label: Text {
text: parent.text // undefined here
color: 'white'
font.family: 'Helvetica'
font.pixelSize: 12
font.bold: true
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
}
And a part of my main qml file:
import QtQuick 2.3
import QtQuick.Window 2.1
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Window {
id: main
title: 'Messenger'
width: 1024
height: 768
minimumWidth: 800
minimumHeight: 600
RowLayout {
id: layout
anchors.fill: parent
spacing: 0
Rectangle {
id: sidebar
color: '#3C3E55'
Layout.fillHeight: true
Layout.preferredWidth: 200
ButtonCompanyName {
id: buttonCompanyName
}
ButtonNewMessage {
id: buttonNewMessage
}
SidebarMenuButton {
id: buttonInbox
text: 'Inbox (1)'
anchors.top: buttonNewMessage.bottom
}
SidebarMenuButton {
id: buttonSentMessages
text: 'Sent messages'
anchors.top: buttonInbox.bottom
}
SidebarMenuButton {
id: buttonStarred
text: 'Starred'
anchors.top: buttonSentMessages.bottom
}
}
I commented the line with error. parent there doesn't refer to button so the text in all buttons is empty. I need to access parent button from there and get it's text property. The component has no id cause it's used multiple times and ids are assigned in the main qml file. So the question is: how can I get that button text without id?
There are two ways to set text in your case.
1)The Button for which you are applying the style is available as control property in ButtonStyle class. You can set the the text as text:control.text
Reference:control property(ButtonStyle)
2)You can give an id to the Button in SidebarMenuButton type and access its textproperty.
Button
{
id:button
.
.
.
text: button.text
}
You can assign an id inside your component file that would not conflict with the id you use when you instantiate the component somewhere else. I use the same value for the id of most of my QML components: container so that I can easily reference properties from the root of the item.
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
Button {
id: container
style: ButtonStyle {
background: Rectangle {
color: 'transparent'
}
label: Text {
text: container.text
}
}
}
Then when you instantiate this component in another file you set whichever id you want and it would still work