Setting QML button background by QtQuick Styles

1
votes

I encounter many difficulties while I try to set my Button background following the documention.

For some reason Qt doesn't find the import QtQuick.Controls.Styles. I've tried to import it in many ways but without success. My last try:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

import QtGraphicalEffects 1.0

Button {
    id: btn
    property int row
    property int col
    property Item buttonPreview
    property bool hasPreview: true
    GridLayout.row: row
    GridLayout.col: col
    GridLayout.colSpan: 2
    GridLayout.rowSpan: 2
    width: 50
    height: 50

    style: ButtonStyle {
        background: Rectangle {
                 color:"white"
                }
    }

...

}

I encounter the following errors:

  1. import QtQuick.Controls.Styles 1.2 code is underlined saying that QML module not found
  2. Btn.qml:21:5: Cannot assign to non-existent property "style" appears when I am using the application.

Strange thing that if I remove the import QtQuick.Controls.Styles 1.2, the style: ButtonStyle { becomes underlined.

I use Qt 5.3.2.

Part of my .pro configuration file:

QT       += core gui svg xml network quick gui-private qml quickwidgets widgets concurrent
TARGET = ProjectName 
TEMPLATE = app
CONFIG += c++12 plugin

Any idea is appreciated, really thanks for the time for helping solving my problem.

2
qtqmlqt5qt-quickqtquick2
Which Qt version are you using? What's in <qtdir>/qml/QtQuick/Controls/Styles? - Mitch
I have 2 directory and a file under qml\QtQuick\Controls\Styles: Base, Desktop directories and qmldir file. - flatronka
Btw, I think CONFIG += c++12 must be CONFIG += c++11. - Simon Warta
Good point the should be c++11. My version of Qt creator is 3.1. - flatronka
did u solve the problem. i also has the same issue i cant set the background - George Thomas

2 Answers

0
votes

  1. The problem with the module not found, I think, is with the previous version of Qt. You should remove Qt5.2, using the maintenance tool. After that, I tried your QML code in a Window and it worked (of course after removing the GridLayouts).

  2. GridLayout requires the module import QtQuick.Layouts 1.1 and is applied to a Grid, but you have no Grid.

0
votes

Try to change

import QtQuick.Controls.Styles 1.2

to

import QtQuick.Controls.Styles 1.0