Nicolas Schubhan
Nicolas Schubhan

Reputation: 1756

Qt QML anchors issue

i've a problem with anchors in QML file, this code is not working, the anchors.left is not apply to the text, the text stay in the checkbox :

Checkbox{
    objectName: "chkRemenber"
    id: chkRemenber
}
Text {
    id: labRemenber
    text: "REMENBER"
    anchors.left: chkRemenber.right
}

But if i don't use my own component, but an image, it's working, the text is on the left of chkRemenber2 :

Image {
    id: chkRemenber2
    width: 30
    height: 30
    source: "../checkbox_on.png"
    fillMode: Image.PreserveAspectFit;
    MouseArea {
        anchors.fill: parent
        onClicked: toggle()
    }
}
Text {
    id: labRemenber2
    text: "REMENBER"
     anchors.left: chkRemenber2.right
}

this is the code of my checkbox :

import QtQuick 1.0

Rectangle {
id: container
property bool pressed: false
property string src: "../checkbox_off.png"

function toggle (){
    if (container.state == "on")
        container.state = "off";
    else
        container.state = "on";
    console.log("CLICK ! " + container.state);
}

Image {
    id: checkBoxImg
    width: 30
    height: 30
    source: src
    fillMode: Image.PreserveAspectFit;

    MouseArea {
        anchors.fill: parent
        onClicked: toggle()
    }
}
states: [
    State {
        name: "on"
        PropertyChanges { target: checkBoxImg; source: "../checkbox_on.png" }
        PropertyChanges { target: container; pressed: true }

    },
    State {
        name: "off"
        PropertyChanges { target: checkBoxImg; source: "../checkbox_off.png" }
        PropertyChanges { target: container; pressed: false }
    }
]
}

Upvotes: 1

Views: 4308

Answers (1)

Abhijith
Abhijith

Reputation: 2632

I think that because there are no dimensions on anchors specified for your Checkbox component the QML Engine doesn't know how to position it. Try these options.

  • Specify Dimensions(height,Width) or anchors to the Checkbox component
  • Use a 'Column' or 'Row' Item so you don't have to micro manage layouts.

Upvotes: 3

Related Questions