Проблема с якорями Qt QML

#qt #qml #qt-quick

#qt #qml #qt-быстрый

Вопрос:

у меня проблема с якорями в файле QML, этот код не работает, якоря.значение «слева» не применяется к тексту, текст остается в флажке :

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

Но если я не использую свой собственный компонент,
но изображение, оно работает, текст находится слева от 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
}
  

это код моего флажка :

 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 }
    }
]
}
  

Ответ №1:

Я думаю, что, поскольку в якорях, указанных для вашего компонента Checkbox, нет измерений, движок QML не знает, как его расположить. Попробуйте эти варианты.

  • Укажите размеры (высоту, ширину) или привязки к компоненту Checkbox
  • Используйте элемент ‘Column’ или ‘Row’, чтобы вам не приходилось микроуправлять макетами.

Комментарии:

1. если вы хотите еще больше улучшить код, используйте height: parent.height (и width) в изображении (или наоборот) или даже используйте изображение в качестве корня вашего флажка. Прямоугольник на самом деле не нужен.